Menubar compass mixin

Size
4,925 Kb
Views
4,048

How do I make an menubar compass mixin?

Meubar is just a simple implementation if a mixin using compass to make some markup conventions using lists and anchors into a menubar. You can set a color and the gradient is generated. You set the font-size, height and then you can set an optional border-radius.. What is a menubar compass mixin? How do you make a menubar compass mixin? This script and codes were developed by Michael Parenteau on 03 January 2023, Tuesday.

Menubar compass mixin Previews

Menubar compass mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>menubar compass mixin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <ul class='menubar black'> <li> <a href='#'>first item</a> </li> <li> another item (hover me) <ul> <li> <a href='#'>Menu Item One</a> </li> <li> <a href='#'>Menu Item Two</a> </li> <li> <a href='#'>Menu Item Three</a> </li> <li> <a href='#'>Menu Item Four</a> </li> </ul> </li> <li> <a href='#'>Item Three</a> </li> </ul> <ul class='menubar grey'> <li> <a href='#'>first item</a> </li> <li> another item (hover me) <ul> <li> <a href='#'>Menu Item One</a> </li> <li> <a href='#'>Menu Item Two</a> </li> <li> <a href='#'>Menu Item Three</a> </li> <li> <a href='#'>Menu Item Four</a> </li> </ul> </li> <li> <a href='#'>Item Three</a> </li> </ul> <ul class='menubar pink'> <li> <a href='#'>first item</a> </li> <li> another item (hover me) <ul> <li> <a href='#'>Menu Item One</a> </li> <li> <a href='#'>Menu Item Two</a> </li> <li> <a href='#'>Menu Item Three</a> </li> <li> <a href='#'>Menu Item Four</a> </li> </ul> </li> <li> <a href='#'>Item Three</a> </li> </ul> <ul class='menubar white'> <li> <a href='#'>first item</a> </li> <li> another item (hover me) <ul> <li> <a href='#'>Menu Item One</a> </li> <li> <a href='#'>Menu Item Two</a> </li> <li> <a href='#'>Menu Item Three</a> </li> <li> <a href='#'>Menu Item Four</a> </li> </ul> </li> <li> <a href='#'>Item Three</a> </li> </ul>
</div>
</body>
</html>

Menubar compass mixin - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.container { padding: 20px;
}
.menubar { -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); font-family: helvetica; font-size: 14px; z-index: 1; margin-bottom: 20px;
}
.menubar.black { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #000000)); background-image: -moz-linear-gradient(#4d4d4d, #000000); background-image: -webkit-linear-gradient(#4d4d4d, #000000); background-image: linear-gradient(#4d4d4d, #000000); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; height: 50px; border: 1px solid #000;
}
.menubar.black a, .menubar.black li { color: #fff; text-decoration: none; position: relative; padding: 0 10px; display: block;
}
.menubar.black a:hover, .menubar.black li:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #000000)); background-image: -moz-linear-gradient(#000000, #000000); background-image: -webkit-linear-gradient(#000000, #000000); background-image: linear-gradient(#000000, #000000);
}
.menubar.black a:hover ul, .menubar.black li:hover ul { display: block;
}
.menubar.black li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; float: left; line-height: 50px; border-right: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid black;
}
.menubar.black li:first-child { border-left: none; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
}
.menubar.black li:last-child { -moz-box-shadow: inset -1px 0 0 black; -webkit-box-shadow: inset -1px 0 0 black; box-shadow: inset -1px 0 0 black;
}
.menubar.black li:hover { cursor: default;
}
.menubar.black li ul { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); display: none; position: absolute; top: 100%; left: 0; background: black; padding-bottom: 10px; min-width: 100%; z-index: 2;
}
.menubar.black li ul li { display: block; float: none; height: auto; line-height: 1; padding: 0; white-space: nowrap;
}
.menubar.black li ul li:hover { background: transparent;
}
.menubar.black li ul li a { padding: 5px 10px;
}
.menubar.black li ul li a:hover { background: rgba(255, 255, 255, 0.25);
}
.menubar.grey { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #333333)); background-image: -moz-linear-gradient(#808080, #333333); background-image: -webkit-linear-gradient(#808080, #333333); background-image: linear-gradient(#808080, #333333); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; height: 50px; border: 1px solid #666;
}
.menubar.grey a, .menubar.grey li { color: #fff; text-decoration: none; position: relative; padding: 0 10px; display: block;
}
.menubar.grey a:hover, .menubar.grey li:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBkMGQwZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #333333)); background-image: -moz-linear-gradient(#0d0d0d, #333333); background-image: -webkit-linear-gradient(#0d0d0d, #333333); background-image: linear-gradient(#0d0d0d, #333333);
}
.menubar.grey a:hover ul, .menubar.grey li:hover ul { display: block;
}
.menubar.grey li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; float: left; line-height: 50px; border-right: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid #333333;
}
.menubar.grey li:first-child { border-left: none; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
}
.menubar.grey li:last-child { -moz-box-shadow: inset -1px 0 0 #333333; -webkit-box-shadow: inset -1px 0 0 #333333; box-shadow: inset -1px 0 0 #333333;
}
.menubar.grey li:hover { cursor: default;
}
.menubar.grey li ul { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); display: none; position: absolute; top: 100%; left: 0; background: #333333; padding-bottom: 10px; min-width: 100%; z-index: 2;
}
.menubar.grey li ul li { display: block; float: none; height: auto; line-height: 1; padding: 0; white-space: nowrap;
}
.menubar.grey li ul li:hover { background: transparent;
}
.menubar.grey li ul li a { padding: 5px 10px;
}
.menubar.grey li ul li a:hover { background: rgba(255, 255, 255, 0.25);
}
.menubar.pink { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmN2FhNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhMTY1NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ef7aa7), color-stop(100%, #ba1655)); background-image: -moz-linear-gradient(#ef7aa7, #ba1655); background-image: -webkit-linear-gradient(#ef7aa7, #ba1655); background-image: linear-gradient(#ef7aa7, #ba1655); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; height: 50px; border: 1px solid #ba1655; text-shadow: 0 1px 1px #000;
}
.menubar.pink a, .menubar.pink li { color: #fff; text-decoration: none; position: relative; padding: 0 10px; display: block;
}
.menubar.pink a:hover, .menubar.pink li:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2MGUzNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhMTY1NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #760e36), color-stop(100%, #ba1655)); background-image: -moz-linear-gradient(#760e36, #ba1655); background-image: -webkit-linear-gradient(#760e36, #ba1655); background-image: linear-gradient(#760e36, #ba1655);
}
.menubar.pink a:hover ul, .menubar.pink li:hover ul { display: block;
}
.menubar.pink li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; float: left; line-height: 50px; border-right: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid #ba1655;
}
.menubar.pink li:first-child { border-left: none; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
}
.menubar.pink li:last-child { -moz-box-shadow: inset -1px 0 0 #ba1655; -webkit-box-shadow: inset -1px 0 0 #ba1655; box-shadow: inset -1px 0 0 #ba1655;
}
.menubar.pink li:hover { cursor: default;
}
.menubar.pink li ul { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); display: none; position: absolute; top: 100%; left: 0; background: #ba1655; padding-bottom: 10px; min-width: 100%; z-index: 2;
}
.menubar.pink li ul li { display: block; float: none; height: auto; line-height: 1; padding: 0; white-space: nowrap;
}
.menubar.pink li ul li:hover { background: transparent;
}
.menubar.pink li ul li a { padding: 5px 10px;
}
.menubar.pink li ul li a:hover { background: rgba(255, 255, 255, 0.25);
}
.menubar.white { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I4YjhiOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #b8b8b8)); background-image: -moz-linear-gradient(#ffffff, #b8b8b8); background-image: -webkit-linear-gradient(#ffffff, #b8b8b8); background-image: linear-gradient(#ffffff, #b8b8b8); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; height: 50px; border: 1px solid #999;
}
.menubar.white a, .menubar.white li { color: #333; text-decoration: none; position: relative; padding: 0 10px; display: block;
}
.menubar.white a:hover, .menubar.white li:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkyOTI5MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I4YjhiOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #929292), color-stop(100%, #b8b8b8)); background-image: -moz-linear-gradient(#929292, #b8b8b8); background-image: -webkit-linear-gradient(#929292, #b8b8b8); background-image: linear-gradient(#929292, #b8b8b8);
}
.menubar.white a:hover ul, .menubar.white li:hover ul { display: block;
}
.menubar.white li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; float: left; line-height: 50px; border-right: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid #b8b8b8;
}
.menubar.white li:first-child { border-left: none; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
}
.menubar.white li:last-child { -moz-box-shadow: inset -1px 0 0 #b8b8b8; -webkit-box-shadow: inset -1px 0 0 #b8b8b8; box-shadow: inset -1px 0 0 #b8b8b8;
}
.menubar.white li:hover { cursor: default;
}
.menubar.white li ul { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); display: none; position: absolute; top: 100%; left: 0; background: #b8b8b8; padding-bottom: 10px; min-width: 100%; z-index: 2;
}
.menubar.white li ul li { display: block; float: none; height: auto; line-height: 1; padding: 0; white-space: nowrap;
}
.menubar.white li ul li:hover { background: transparent;
}
.menubar.white li ul li a { padding: 5px 10px;
}
.menubar.white li ul li a:hover { background: rgba(255, 255, 255, 0.25);
}
Menubar compass mixin - Script Codes
Menubar compass mixin - Script Codes
Home Page Home
Developer Michael Parenteau
Username michaelparenteau
Uploaded January 03, 2023
Rating 3
Size 4,925 Kb
Views 4,048
Do you need developer help for Menubar compass mixin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Parenteau (michaelparenteau) Script Codes
Name
A Pen by Michael Parenteau
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!