Menu multinível

Views:
VARIÁVEIS DO MENU
(colar abaixo de /* Variable definitions
   ====================)


<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 CSS
(colar acima de ]]></b:skin>)

/* 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 JAVASCRIPT  E JQUERY
(colar acima de </head>)

<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 HTML
(colar abaixo de <body expr:class='&quot;loading&quot; + 
data:blog.mobileClass'>)

<center><div id='menu-wrapper'>
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a> 
   <ul class='menu'>
   <li><a href='#'><i class='fa fa-home'/> HOME</a></li>
  <li><a href='#'><i class='fa fa-user'/> SOBRE</a></li>
<li><a class='homer' href='#'><i class='fa fa-laptop'/> BLOG</a>
   <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a></li>
   <li><a href='#'>Sub-Menu 3</a></li>
   <li><a href='#'>Sub-Menu 4</a></li>
   <li><a href='#'>Sub-Menu 5</a></li> 
   </ul>
   </li>


    <li><a href='#'><i class='fa fa-tags'/> CATEGORIAS</a>
  <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href='#'>Sub-Menu 3</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>

<li><a href='#'><i class='fa fa-camera'/> PORTFOLIO</a>
  <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href='#'>Sub-Menu 3</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>
<li><a href='#'><i class='fa fa-bullhorn'/> ANUNCIE AQUI</a></li>
  <li><a href='#'><i class='fa fa-sitemap'/> SITEMAP</a></li>
  <li><a href='#'><i class='fa fa-exclamation-triangle'/> DISCLAIMER</a></li>
<li><a href='#'><i class='fa fa-envelope'/> CONTATO</a></li>
  </ul>
  </nav></div></center>

Formulário de contato

Nome

E-mail *

Mensagem *