Menu responsivo


CÓDIGO CSS
(colar acima de ]]></b:skin>)

/* MENU RESPONSIVO FIXO NO TOPO BY ELAINE GASPARETO
----------------------------------------------- */
#menu{
background: $(tabs.background.color);
color:$(tabs.text.color);
height: 45px;
width: 100%;
z-index: 999;
position: fixed;
padding-left: 4em;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;
width:100%;
}
#menu li{
float:left;
display:inline;
position:relative;
font: $(tabs.font);
}
#menu a{display: block;
line-height: 45px;
padding: 0 20px;
text-decoration: none;
color:$(tabs.text.color);
}
#menu li a:hover{
color:$(tabs.selected.text.color);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: $(tabs.selected.background.color);
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
}
#menu label{
font: 40px Arial;
display:none;
width:35px;
height:46px;
line-height:46px;
text-align:center;
}
#menu label span{
font-size:30px;
position:absolute;
left:35px;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 220px;
background: #fff;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font: $(tabs.font);
text-transform: none;
}
#menu ul.menus a{
color: #000;
line-height: 45px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: $(tabs.background.color);
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 1024px){
#menu{position:fixed}
#menu ul{background:#000;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font: $(tabs.font);border-top: none;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:#fff}
#menu input:checked ~ ul{display:block}
}
CÓDIGO HTML
(colar abaixo de <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>)

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>&#160;&#160;</span></label>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>

<li><a href='LINK'>Nome da aba</a></li>

<li><a href='#'>Nome da aba multinível<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
</ul>
</li>

<li><a href='LINK'>Nome da aba</a></li>

<li><a href='#'>Nome da aba multinível<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
</ul>
</li>

<li><a href='LINK'>Nome da aba</a></li>

</ul>
</nav>

Modelos prontos para lista numerada dos posts

CÓDIGO MODELO 1


.post ol {
counter-reset:li;
list-style: none;
font:100%;
padding:0;
margin-bottom:2em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol ol {margin: 0 0 0 2em;}
.post ol li{
position:relative;
display:block;
padding:.4em .4em .4em .8em;
margin:1.5em 0 .5em 2.5em;
background:#ffffff;
color:#404040;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li:hover{
background:#404040;
color: #ffffff !important;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:-2.5em;
top:50%;
margin-top:-1em;
background:#404040;
color:#ffffff;
height:2em;
width:2em;
line-height:2em;
text-align:center;
font-weight:500;
}
.post ol li:after{
position:absolute;
content:'';
border: .5em solid transparent;
left:-1em;
top:50%;
margin-top:-.5em;
transition:all .3s ease-out;
}
.post ol li:hover:after{
left:-.5em;
border-left-color:#404040;
}
.post ol li span{
position:relative;
display:block;
padding:5px 8px;
margin-bottom:10px;
background:#ffffff;
color:#404040;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li span:hover{
background:#404040;
}

CÓDIGO MODELO 2:


.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 100% /* tamanho e estilo da fonte*/
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: 1.5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -1em;
background: #FF9A4F; /* cor de fundo dos números*/
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ffffff;
}
.post ol li:after{
position: absolute;
content: '';
left: 4px;
margin-top: -.5em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #FF9A4F; /* cor de fundo da seta*/
}



CÓDIGO MODELO 3:

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 100%; /* tamanho e estilo da fonte*/
padding: 0;
margin-bottom: 4em;
font-weight: none;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: 1.5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 1.8em;
color: #ffffff; /* cor do texto dos números*/
background: #FF9A4F; /* cor de fundo dos números*/
border: .2em solid #fff; /* cor da borda*/
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}


CÓDIGO MODELO 4

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* estilo da borda inferior dos elementos*/
background:#f2f2f2; /* cor de fundo dos elementos*/
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* tamanho dos números*/
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#ffffff; /* cor dos números*/
text-align:left;
background:#FF9A4F; /* cor de fundo dos números*/
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #FF9A4F; /* color of the triangle behind */
}



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage