Menubt lateral degrau

Olá voltei com mais uma das minhas partilhas.
Como pode visualizár na imagem acima trago aqui um menu lateral em forma degrau.
Fica super vistoso na sidebar do blogger , e tambem arruma uma serie de links de uma vez.
Mas vamos visualizár online:ENTRE AQUI!!!

Siga os passos abaixo e vamos colocár o menu``

Antes de tudo faça 1 cópia do seu template/tema...

 1

Aplicár; stylesheet

Note: Vamos aplicár stylesheet abaixo head.

<link href='http://fonts.googleapis.com/css?family=Rouge+Script' rel='stylesheet' type='text/css'/>

 2

Aplicár; css

Note: Vamos aplicár css acima ]]>

.menubt{
  width: 300px;
margin: auto;
}
.btdeg{
list-style: none;
padding-left: 20px;
position: relative;
color: #666;
font-family: 'Rouge Script', cursive;
font-size: 20px;
text-shadow:0 3px 2px rgba(0,0,0,0.5);
}
.btdeg:before{
content: '';
width: 1px;
background: #666;
top: 0;
bottom:7px;
left:0;
position: absolute;
}
.btdeg li{
position: relative;
margin-top:10px;
}
.btdeg li:hover, .btdeg li:focus{
color: #000;
cursor: pointer;
}
.btdeg li:before{
content: '';
width: 20px;
height: 1px;
background: #666;
top: 12px;
left:-20px;
position: absolute;
}
.btdeg .btdeg{display:none;
}

 3

Aplicár; script

Note: Vamos aplicár script acima body

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.branch&#39;).click(function(){
     $(this).children().toggleClass(&#39;fa-folder-open-o&#39;);
$(this).next().slideToggle();
 
});
</script>

Se já estiver ajaxlibsjquery retire pode fazer conflito...

Agora salve guarde e vamos em esquema e aplique gadget html/javascript...

 4

Aplicár; html/javascript

Note: Vamos aplicár html/javascript .

<div class="menubt">
  <ul class="btdeg">
<li><span class="branch"><i class="fa fa-folder-o"></i> Menu-</span>
<ul class="btdeg">
<li>
<span class="branch"><i class="fa fa-folder-o"></i>Menu0</span>
<ul class="tree">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-2</a></span></li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i>Menu1</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-2</a></span></li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i> Menu-2</span>
<ul class="btdeg">
<li><span class="branch"><i class="fa fa-folder-o"></i> Sub-menu1</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-2</a></span></li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i> Sub-menu2</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
</ul>
</li>
<li><span class="branch"><i class="fa fa-folder-o"></i> Sub-menu3</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
</ul>
</li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i> Menu-3</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-2</a></span></li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i> Menu-4</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-2</a></span></li>
</ul>
</li>
<li>
<span class="branch"><i class="fa fa-folder-o"></i> Menu-5</span>
<ul class="btdeg">
<li><span class="Leaf"><i class="fa fa-file-o "></i><a href="#"> vazio-1</a></span></li>
</ul>
</li>
</ul>
 </li></ul></div>

E está feito os 4 passos salve e veja como ficou...
Onde estiver( #) coloque link quiser...
Alguma questão deixe recado fuiiiiiiiiiiiii...

Menubt lateral degrau

► 0

► menus

► Cartita