Menubar compass mixin
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);
}
| 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 | Size |
| A Pen by Michael Parenteau | 2,133 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Project Euler Problem 17 | Bfillmer | 2,739 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| Underlined form fields | Mitchdot | 2,323 Kb |
| A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
| Ghost | Mghayour | 11,738 Kb |
| Clock with full screen background | Owebboy | 2,415 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Responsive Pricing Table | Jeremycaris | 2,690 Kb |
| Parallax.js | Zmeeey5 | 2,330 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!