Home menu drop-down Aprenda Como se faz: ... "menu drop-down"

Aprenda Como se faz: ... "menu drop-down"

05:41
Read

UvumiTools Drop down Menu

For those who are interested in installing the navigation on a blog, maybe you are interested in this drop down menu called UvumiTools Drop Down Menu.
uvumitools drop down menu
The difference of UvumiTools Drop Down Menu from the others is at its move that is so smooth, and exotic when we open and close the menu. It is because of using Mootools Javascript FrameWork thus making your blog perform more professional instead of it before. The original tutorial of UvumiTools Drop Down Menu can be read at this page, and at this tutorial, you will find a bit different because Kang Rohman has given a touch on it to be viewed more interesting.
 demo

Need to remember that one template will be different with the others, so you have to be able to adapt this tutorial with your template by modifying the CSS given.
Preparation in creating UvumiTools Drop Down Menu:

  • Keywords
The keywords that I mean are those to be viewed in the navigation. As an example, Kang Rohman wants to use the keywords of Home, Free Template, Blog Tutorial, Business Guide, and more.

  • Links
The links that I mean are the URL addresses to be pointed when visitors click on the keywords or navigation buttons that we will create at this tutorial. The links or URL addresses can be directed to other blogs. Example:
http://template-tutorial.com
http://www.blogspottutorial.com
http://www.life4business.com

The URLs can also point to the pages in the blog itself, e.g. the posts or categories. If you have not caught this point, please get the article talking about Horizontal Navigation here at Tutorial On Making Horizontal Navigation , e.g. :
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html
http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html

Need to remember again that one template design will be different from the others, so it is possible that this tutorial will not work on your blog.  Therefore, Kang Rohman suggests you to apply this tutorial on your new blog as try-out to avoid the error occurring to your main blog. Please choose the white minima template to make you easy.
Let’s get started:

  1. Please login to blogger with your ID
  2. Click Layout
  3. Click Edit HTML. Edit HTML
           
  4. Find the code ]]></b:skin>
  5. Copy and paste the code below exactly above the code ]]></b:skin> 

  7. .NavbarMenu {
    background:#191B1D
url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/
AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;
    width: 100%;
    height: 37px;
    color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    font: bold 8px Arial, Tahoma, Verdana;
    clear:both;
    border-left:1px solid #333;
    border-right:1px solid #333
}
.NavbarMenuleft {
    width: 75%;
    float:left;
    margin:0;
    padding:0;
}
.nav {
    margin:0;
    padding:0;
}
.nav ul {
    float: left;
    list-style:none;
    margin:0;
    padding:0;
}
.nav li {
    list-style:none;
    margin:0;
    padding:0;
}
.nav li a, .nav li a:link, .nav li a:visited {
    color:#fff;
    display:block;
    text-transform:capitalize;
    margin:0;
    padding:11px 10px 8px;
    font:normal 12px Georgia, Times New Roman;
    text-decoration: none;
}
.nav li a:hover, .nav li a:active {
    background:#102427 url(http://
lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/
TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;
    color:#FFF;
    margin: 0;
    text-decoration: none;
}
.nav li li a, .nav li li a:link, .nav li li a:visited {
    background:#2C5F24
url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/
s400/button1.gif) repeat-x top left;
    width:200px;
    color:#fff;
    text-transform:capitalize;
    float:none;
    margin:0;
    padding:7px 10px;
    border-bottom:1px solid #0d2601;
    border-left:1px solid #0d2601;
    border-right:1px solid #0d2601;
    font: normal 14px Georgia, Times New Roman;
}
.nav li li a:hover, .nav li li a:active {
    background:#102427
url(http://lh5.ggpht.com/_pt7i0nbIOCY/
SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif)
repeat-x top left;
    color:#fff;
}
.nav li {
    float:left;
    padding:0;
}
.nav li a.enclose, .nav li a.enclose:visited {
    border-top:1px solid #000;
}
.nav li ul {
    z-index: 9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin:0;
    padding:0;
}
.nav li ul a {
    width: 140px;
}
.nav li ul ul {
    margin: -1px 0 0 220px;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul,
.nav li.sfhover ul ul ul {
    left:-999em;
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul,
.nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul {
    left:auto;
}
.nav li:hover, .nav li.sfhover {
    position:static;
}
#search {
    width: 25%;
    font-size: 11px;
    float: right;
    margin: 0;
    padding:0;
}
#searchform {
    margin:0;
    padding:0;
    overflow:hidden;
    display:inline;
}
#searchbox {
    background:#ddd;
    padding:0;
    margin:0;
}
#search input {
    background:transparent;
    color:#fff;
    float:left;
    font-size:12px;
    margin: 7px 0 0 10px;
    width: 110px;
    padding:3px 7px;
    border: 1px solid #fff;
    font: normal 10px arial, verdana, Times New Roman;
}
#search .btn {
    margin:7px 0 0;
    padding:0;
    width:auto;
    border:0;
}
  8. Copy and paste the code below exactly above the code </head> 
        <script type="text/javascript" src="http://
uvumitools.googlecode.com/files/mootools-for-dropdown.js"> </script>   
<script type="text/javascript" src="http://
uvumitools.googlecode.com/files/UvumiDropdown-compressed.js"> </script>     
<script type="text/javascript">    
var myMenu = new UvumiDropdown("dropdown-menu");     
</script>
  9. Scroll down your mouse and then find the code similar with: 
    

    <div id='header-wrapper'>        
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>         
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>       
</b:section>         
</div>
  10. Copy and paste the code below exactly under the code: 
     
        
    <div class='NavbarMenu'>      
<div class='NavbarMenuleft'>      
<ul id='dropdown-menu' class='nav'>      
<li><a href='http://kolom-tutorial.blogspot.com/' rel='nofollow'>Home 
    </a></li>       
<li><a href='http://kolom-tutorial.blogspot.com/search/label/
    download%20gratis' rel='nofollow'>Free Template</a>        
<ul>       
<li><a href='#' rel='nofollow'>Magazine Template Series&#160;&#160;&#187;</a>      
<ul><li><a href='http://kolom-tutorial.blogspot.com/2009/03/magazine-
    template-r1.html'>Magazine Template R.1</a></li>     
<li><a href='http://kolom-tutorial.blogspot.com/2008/03/free-
    template-magazine-template-1.html' rel='nofollow'>Magazine Template 1 
    </a></li>       
<li><a href='http://kolom-tutorial.blogspot.com/2008/09/
    free-template-magazine-template-2.html' rel='nofollow'>
    Magazine Template 2</a></li>          
<li><a href='http://kolom-tutorial.blogspot.com/2009/03/
    free-template-magazine-template-3-hijau.html' rel='nofollow'>
    Magazine Template 3</a></li>    
<li><a href='http://kolom-tutorial.blogspot.com/2009/03/
    free-template-magazine-template-3-biru.html' rel='nofollow'> 
    Magazine Template 3.2</a></li>       
</ul></li>       
<li><a href='#' rel='nofollow'>Magazine Template R Series&#160;&#160;&#187;
    </a>        
<ul><li>
    <a href='http://kolom-tutorial.blogspot.com/2009/03/
    magazine-template-r1.html'>Magazine Template R.1</a></li>    
<li>
    <a href='http://kolom-tutorial.blogspot.com/2009/03/
    magazine-template-r12.html'>Magazine Template R.1.2</a></li>    
<li>
    <a href='http://kolom-tutorial.blogspot.com/2009/04/
    magazine-template-r13.html'>Magazine Template R.1.3</a></li>      
<li>
    <a href='http://kolom-tutorial.blogspot.com/2009/04/
    free-magazine-template-r14.html'>Magazine Template R.1.4</a></li>       
<li>
    <a href='http://kolom-tutorial.blogspot.com/2009/07/
    free-magazine-template-r15.html'>Magazine Template R.1.5</a></li>       
</ul></li>    
<li><a href='#' rel='nofollow'>Templates Gallery</a></li>    
</ul>        
</li>             
<li><a href='http://www.blogspottutorial.com/' 
    rel='nofollow'>Blog Tutorial</a></li>          
<li><a href='http://www.life4business.com/'
    

     rel='nofollow'>Business Guide</a></li>       
</ul></div>      
<div id='search'>       
<form action='/search/' 
    id='searchform' method='get' style='display:inline;'>     
<input id='searchbox' maxlength='160' name='q' onblur='if 
    (this.value == "") {this.value = "Search...";}' onfocus='if 
    (this.value == "Search...") {this.value = ""}' type='text' 
    value='Search...'/>      
<input class='btn' name='' 
    src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/
    3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800' type='image' value='Go'/>      
</form>        
</div></div>
  11. Click SAVE TEMPLATE.
  12. Done
For the first step, you have done it, and for the next step, you simply replace the red-printed links with your own links, and the keywords as viewed in green should be replaced with your own as well.
I am sure that you have to edit on the CSS to match with the characteristics of your template. If you want the raw file of the CSS and JavaScript UvumiTools Drop Down menu, please download here!
Save and Share!
Stumble Digg Tweet Save Reddit More
By Blogspot Tutorial Posted at Tuesday, December 15, 2009
File Under : , ,
 
 
 
fonte e créditos:

 

tradução:                                                                  

 

UvumiTools menu drop-down

..."      para Instalar in interessado eh um blog in Navegação, talvez VOCÊ estabele interessado Neste menu Suspenso Chamada UvumiTools Menu Drop Down."


uvumitools drop down menu
A Diferença de UvumiTools Menu Drop Down e um dos Demais Que atitude SUA e Tão suave e exótico Abrir e fechar quando o menu. E Por Causa do OSU de Mootools Javascript ASSIM Quadro Fazer o Seu blog Mais desempenho hum Profissional, AO inves de antes. O original tutorial de UvumiTools Menu Drop Down PoDE serviços lido in This pageE, Neste tutorial, Voce vai encontrar UM POUCO PORQUE Diferente Kang DEU UM Rohman toque Nele parágrafo serviços Visto Mais Interessante.
 demo


Preciso Que hum Lembrar Modelo vai servi com OS Diferente Outros, entao VOCÊ TEM serviços Que Capaz de adaptar Este tutorial com o Seu Modelo, modificando o CSS dado.
Preparação par de uma CRIAÇÃO UvumiTools Menu Drop Down:

  • Palavras-chave
As Palavras-chave Que eu Quero Dizer São aqueles Que devem nd Navegação Vistos ser. Como Exemplo, Kang USAR Quer Rohman como palavras-chave Início, modelo Free, Blog Tutorial, Negócios GuiaMais E Muito.

  • Links
Os links Que eu Quero Dizer São OS endereços URL um ser apontado quando clicam OS Visitantes não Palavras-chave OU Navegação Botões CRIAR Neste Vamos Que tutorial. Os links de endereços URL OU PoDE serviços parágrafo direcionado Outros blogs. Exemplo:
http://template-tutorial. Com
http://www.blogspottutorial.com
http://www.life4business.com

Como URLs apontar parágrafo PoDE also como Páginas do blog Proprio, Por Exemplo, OU OS Categorias cargas. SE VOCÊ Ainda nao Peguei ESSE Ponto, Por favor Veja o Artigo Que Fala Sobre Navegação Aqui horizontal, não Tutorial Sobre Como Fazer Navegação Horizontal , Por Exemplo,:
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html
http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html


Lembrar de exi Novamente Que hum Desenho de Modelo CADA Será, será Diferente das Outras, entao e Possível Que ESTA tutorial nao vai funcionar Seu blog in. So as to, Kang Rohman sugere Que VOCÊ aplique Este tutorial in Como Seu blog novo try-out par evitar o Erro Que ocorre nenhum blog Seu principal. Por favor ESCOLHA o Modelo de Mínimos Branco n º Torna-lo Fácil.
Vamos comecar:


  1. Faca o login parágrafo blogueiro com o Seu ID
  2. Clique Layout
  3. Clique HTML Novo Depósito. Edit HTML
           
  4. Localize o Código ]]></ B: skin>
  5. Copie e cole o Código Abaixo exatamente Acima do Código ]]></ B: skin> 
    . NavbarMenu {
url # 191B1D (http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/
     
    wqPGB3cXR5Q/s400/button1.gif) repeat-x Esquerdo superior;: Fundo
width: 100%;
height: 37px;
color: # FFFFFF;
margin: 0 auto;
padding: 0;
8px negrito Arial, Tahoma, Verdana;: Fonte
clear: both;
border-left: 1px solid # 333;
border-right: 1px solid # 333
}
. NavbarMenuleft {
width: 75%;
float: left;
margin: 0;
padding: 0;
}
. Nav {
margin: 0;
padding: 0;
}
. ul {Nav
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav li. {
list-style: none;
margin: 0;
padding: 0;
}
. Li nav UMA, UM nav li:. LigAção, li nav UM:. Visited {
color: # fff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 11px 10px 8px;
Fonte:normal 12px Geórgia, Times New Roman;
text-decoration: none;
}
. Nav hum li:. Hover, nav li a: active {
url # 102427 (http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/
    TPCaXfkieYA/button2_thumb% 5b3% 5D.gif) Esquerdo repeat-x superior;: Fundo
color: # FFF;
margin: 0;
text-decoration: none;
}
. Nav hum li li, nav li li a:. LigAção, nav li li a:. Visited {
url # 2C5F24 (http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/
    AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x Esquerdo superior;: Fundo
width: 200px;
color: # fff;
text-transform: capitalize;
float: none;
margin: 0;
padding: 10px 7px;
border-bottom: 1px solid # 0d2601;
border-left: 1px solid # 0d2601;
border-right: 1px solid # 0d2601;
Fonte: normal 14px Geórgia, Times New Roman;
}
. Nav li li a: hover, nav li li a:. Ativos {
url # 102427 (http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/
    TPCaXfkieYA/button2_thumb% 5b3% 5D.gif) Esquerdo repeat-x superior;: Fundo
color: # fff;
}
nav li. {
float: left;
padding: 0;
}
.. A.enclose nav li, li a.enclose nav: visited {
border-top: 1px solid # 000;
}
. Nav li ul {
z-index: 9999;
    POSIÇÃO: Absoluto;
Esquerda:-999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
. Nav ul li a {
width: 140px;
}
. Nav ul li ul {
margin: 0 0 1px-220px;
}
. Nav li: hover ul ul, nav li: .. Passe nav ul ul ul ul ul li.sfhover, 
    nav li.sfhover ul ul ul {.
Esquerda:-999em;
}
nav li:. hover ul, li nav li:. hover ul, nav li li li: ... 
     hover ul li.sfhover nav ul, li nav ul li.sfhover, nav li ul li {li.sfhover.
left: auto;
}
. Nav li: hover {nav li.sfhover.
    POSIÇÃO: estatica;
}
# Pesquisa {
width: 25%;
font-size: 11px;
float: right;
margin: 0;
padding: 0;
}
# {SearchForm
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
# {Searchbox
background: # ddd;
padding: 0;
margin: 0;
}
# {Entrada de Pesquisa
background: transparent;
color: # fff;
float: left;
font-size: 12px;
margin: 0 0 10px 7px;
width: 110px;
padding: 3px 7px;
border: 1px solid # fff;
: Fonte normal 10px Verdana, Arial, Times New Roman;
}
# Pesquisa. Btn {
margin: 0 0 7px;
padding: 0;
width: auto;
border: 0;
}
  6. Copie e cole o Código Abaixo exatamente Acima do Código </ Head> 
        <Tipo de script = "text /javascript"src ="> http://
    uvumitools.googlecode.com/files/mootools-for-dropdown.js "script> </   
<Tipo de script = "text /javascript"src ="> http://uvumitools.googlecode.
    com/files/UvumiDropdown-compressed.js "script> </     
<Tipo de script = "text /javascript">    
var = Atalhos UvumiDropdown novo ("Suspenso menu");     
</ Script>
  7. Desça o mouse e, seguida eles, encontrar o Código semelhante a: 
     
        div id = 'header-wrapper'> <        
<b:section class='header' id='header' maxwidgets='1' 
    showaddelement='no'>         
id = <b:widget title='test locked='true' 'header1'
     (Header)' type='Header'/>       
</ B: section>         
</ Div>
  8. Copie e cole o Código Abaixo exatamente soluço o Código: 
     
        class = 'NavbarMenu' div> <      
class = 'NavbarMenuleft' div> <      
<ul id='dropdown-menu' class='nav'>      
<li> <a href = "http://kolom-tutorial. Blogspot.com /
     "rel = '> nofollow"Início</ A> </ li>       
<li> <a href = "http://kolom-tutorialBusca. / 
    label blogspot.com /% 20gratis download'rel ='> 
    nofollow "Free Template</ A>        
<ul>       
<li> <a href='#' rel='nofollow'> Magazine Template Series »</ a>      
<ul> <li> <a href = "http://kolom-tutorial.blogspot.com/2009/03/
    magazine-template-r1.html'>Revista Molde R.1</ A> </ li>     
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2008/03/
    free-template-magazine-template-1.html'rel ='> nofollow
     "Magazine Modelo 1</ A> < / li>       
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2008/09/
    free-template-magazine-template-2.html'rel ='> nofollow 
    "Magazine Modelo 2</ A> < / li>          
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/03/
    free-template-magazine-template-3-hijau.html'rel = "nofollow"> 
    "Magazine Modelo 3</ A > </ li>    
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/03/
    free-template-magazine-template-3-biru.html'rel ='> nofollow 
    "Revista Molde 3,2< / A> </ li>       
</ Ul> </ li>       
<li> <a href='#' rel='nofollow'> Magazine Modelo R Series »</ a>        
<ul> <li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/03/
    magazine-template-r1.html'>Revista Molde R.1</ A> </ li>    
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/03/
    magazine-template-r12.html'>Revista Molde R.1.2</ A> </ li>    
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/04/
    magazine-template-r13.html'>Revista Molde R.1.3</ A> </ li>      
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/04/
    free-magazine-template-r14.html'>Revista Molde R.1.4</ A> </ li>       
<li> <a href ="http: / / kolom-tutorial.blogspot.com/2009/07/
    free-magazine-template-r15.html'>Revista Molde R.1.5</ A> </ li>       
</ Ul> </ li>    
<li> <a href='#' Modelos rel='nofollow'> Galeria</ A> </ li>    
</ Ul>        
</ Li>             
<li> <a href ="http: / / www.blogspottutorial.com/'rel ='> 
    nofollow "Blog Tutorial</ A> </ li>          
<li> <a href = "http://www.life4business.com/ 
    'rel ='> nofollow "Negócios da Guia</ A> </ li>       
</ Ul> </ div>      
id = 'pesquisa' div> <       
<form action='/search/' id='searchform' method='get' 
    style='display:inline;'>     
<Maxlength entrada id 'name =' = 'Busca' onblur = "160" = "q if 
    (this.value ==" ") {this.value = 'procurar ...";}' onfocus =" 
    if (this . valor == "Procura ...") {this.value =" "} 'type ='" value = 
    "procurar Texto ...'/>      
Entrada = nome de classe 'btn' src <= ='''% 
    http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/
    AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb 5D.png% 
    5B1? Imgmax = 800 'type ='imagem'Valor =' Go '/>      
</ Form>        
</ Div> </ div>
  9. Clique Salvar Modelo.
  10. Feito
Pará uma Primeira etapa, VOCÊ TEM Feito ISSO, e um par Próxima Etapa, Basta substituir o vermelho Impresso-links com links proprios SEUS, OS e Palavras-chave Como nenhum Visto verde serviços desen substituido Pelo Bem Seu Próprio.
Estou Certo de Que VOCÊ tera editar Que não COMBINAR COM parágrafo CSS como Características do Modelo SEU. Se Quiser VOCÊ S-primas da ARQUIVO CSS e JavaScript UvumiTools menu Drop Down, Por favor here Leia ou escreva algo!
Salve e Compartilhe!
Tropeçar Digg Chilrear Guardar Reddit Mais


Tags :

2 comentários:

  1. Luís Eduardo Pirollo5 de novembro de 2010 às 20:48

    Minha querida amiga Edilene, boa noite!!!
    Mais uma excelente dica para incrementar os nossos blogs, como sempre minha amiga!!!
    Parabéns pela excelente postagem, adorei!!!
    Beijos e muita luz!!!

    ResponderExcluir
  2. flo31 de dezembro de 2012 às 09:03

    obrigada duamiguh!

    ResponderExcluir


Mensagem do formulário de comentário:

Assinar: Postar comentários ( Atom )
Tecnologia do Blogger.