Código 1:
/* Variable definitions
Código 2:
<Group description="Cor de fundo do menu" selector=".menu-outer ">
<Variable name="menu.background.color" description="Background Color" type="color" default="#141414" value="#141414"/>
<Variable name="menu.selected.background.color" description="Cor do fundo do menu hover" type="color" default="#444444" value="#800080"/>
<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#444444" value="#ffffff"/>
<Variable name="submenu.selected.background.color" description="Cor do fundo do submenu hover" type="color" default="#444444" value="#800080"/>
</Group>
<Group description="Fontes do menu" selector=".menu-inner .widget li a">
<Variable name="menu.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Calibri"/>
<Variable name="menu.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
<Variable name="menu.selected.text.color" description="Selected Color" type="color" default="$(menu.text.color)" value="#ffffff"/>
<Variable name="submenu.text.color" description="Submenu Text Color" type="color" default="$(body.text.color)" value="#000000"/>
<Variable name="submenu.text.color.hover" description="Submenu Text Color Hover" type="color" default="$(body.text.color)" value="#ffffff"/>
</Group>
Código 3:
]]></b:skin>
Código 4:
/* MENU MULTINÍVEL COM ÍCONES BY ELAINEGASPARETO.COM
----------------------------------------------- */
#menu-wrapper{
position:fixed;
z-index: 999999;
width:100%;
}
nav {
display: block;
margin-top: 0px;
background: $(menu.background.color);
}
.menu {display: block;}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child { margin-left: 0;}
.menu li a {
font: $(menu.font);
text-decoration: none;
padding: 20px 15px;
display: block;
color: $(menu.text.color);
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: $(menu.selected.text.color);
background: $(menu.selected.background.color);
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: $(submenu.background.color);
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color:$(submenu.background.color);
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 13px;
font-weight: normal;
display: block;
color:$(submenu.text.color);;
background: $(submenu.background.color);
}
.menu ul li a:hover,.menu ul li:hover>a {
background: $(submenu.selected.background.color);
color: $(submenu.text.color.hover);
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: $(submenu.background.color);
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: $(menu.background.color);
color: $(menu.text.color) !important;
text-transform: uppercase;
}
.responsive-menu:hover {
background: $(menu.selected.background.color);
color: $(menu.selected.text.color);
text-decoration: none;
}
a.homer { background: $(menu.background.color);}
@media (max-width: 1024px) {
.mainWrap { width: auto; padding: 50px 20px; }
.menu { display: none; }
.responsive-menu {display: block; margin-top: 0px; }
nav { margin: 0; background: none; }
.menu li { display: block; margin: 0; }
.menu li a {
background: $(submenu.background.color);
color: $(submenu.text.color);
}
.menu li a:hover,.menu li:hover>a {
background: $(menu.selected.background.color);
color: $(menu.selected.text.color);
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
Código 5:
</head>
Código 6:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
//]]>
</script>
Código 7:
<body expr:class='"loading" + data:blog.mobileClass'>
Cógido 8:
