Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Mudar Menu Superior

brunowdbrunowd Usuário
editado January 2014 em Dúvida Temas / Templates
Olá ,

Segui este tuto http://referenciamagento.blogspot.com.br/2013/06/topmenu-com-css-menu-maker.html#comment-form e consegui trocar o menu e tal, mas eu fiz um menu novo do zero no dreamweaver,queria saber se alguém sabe como fazer o mesmo que no tutorial do referência magento.

Esse é o meu html:


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
<title>Menu</title>

<link rel=\"stylesheet\" href=\"menu.css\"/>

</head>
<body>

<ul>
<li class=\"green\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/\"></a>Página Inicial</a></p>

</li>
<li class=\"lilas\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/aniversarios.html\">Aniversários</a></p>

</li>
<li class=\"yellow\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/escolas.html\">Escolas</a></p>

</li>
<li class=\"blue\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/cha-de-fraldas.html\">Chá de Fraldas</a></p>

</li>
<li class=\"verde\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/presentes.html\">Presentes</a></p>

</li>
<li class=\"laranja\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/formaturas.html\">Formaturas</a></p>

</li>
<li class=\"red\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/empresas.html\">Empresas</a></p>



</li>
<li class=\"purple\">
<p><a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/faleconosco.html\">Fale conosco</a></p>

</li>
</ul>
</div>
</body>
</html>




e esse o CSS:

@charset \"utf-8\";
/* CSS Document */

body{
font-family:\"Lucida Grande\",arial,sans-serif;background:#F3F3F3;
}
ul{margin:0;padding:0;
}
li{width:125px;height:60px;float:left;color:#191919;text-align:center;overflow:hidden;
}
a{
color:#FFF;text-decoration:none;}p{padding:0px 5px;
}
.subtext{
padding-top:15px;
}
.green{
background:#6AA63B top left no-repeat;
}
.yellow{background:#FBC700 top left no-repeat;
}
.red{
background:#D52100 top left no-repeat;
}
.purple{
background:#5122B4 top left no-repeat;
}
.lilas{background:#b215a0 top left no-repeat;
}
.verde{background:#3fc11f top left no-repeat;
}
.laranja{background:#f68d0d top left no-repeat;
}
.blue{background:#0292C0 top left no-repeat;
}
.blue{background:#0292C0 top left no-repeat;
}








Um menu bem simples mas não sei como colocá-lo no magento :? .

Abraço.

Comentários

  • Jonatan Machado Moderador Global, Administrador
    Ola Bruno
    Pra fazer um menu colorido assim voce vai ter que fazer com javascript acho que e a forma mais facil mais e bem dificil rsrs

    Eu recomendaria você fazer com um background uma imagem com essas cores no <ul> que e ajustar
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ola Bruno
    Pra fazer um menu colorido assim voce vai ter que fazer com javascript acho que e a forma mais facil mais e bem dificil rsrs

    Eu recomendaria você fazer com um background uma imagem com essas cores no <ul> que e ajustar

    fazer um background colorido é fácil,mas eu faço isso no css inline usando o <style></style> ou separado como uma div ou class? E mesmo assim teria que fazer um javascript?? :shock:
  • Jonatan Machado Moderador Global, Administrador
    A loja que voce esta customizando seria esse http://www.mezzbrin.bravunet.com/magentomezz/index.php/ ?

    Nesse loja voce pode colocar o BG no id
    #cssmenu ul{
    background-image:url('URL IMAGEM');
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    A loja que voce esta customizando seria esse http://www.mezzbrin.bravunet.com/magentomezz/index.php/ ?

    Nesse loja voce pode colocar o BG no id
    #cssmenu ul{
    background-image:url('URL IMAGEM');
    }

    Fiz mas não rolou, a única opção que tenho é usar javascript para fazer aquele menu colorido não por ser colorido,mas por ter a mesma estrutura,vou tentar achar um parecido no site http://cssmenumaker.com/css-drop-down-menu
  • Jonatan Machado Moderador Global, Administrador
    Do jeito que eu falei com bg da certo sim, porque não deu certo ai?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Alessandra Moderador Global
    Olá Bruno!
    Se não for necessário pegar as categorias automaticamente, você pode inserir o código html direto no arquivo responsável pelo menu do topo (topmenu.phtml ou top.phtml) e o css no styles.css.
    :)
  • disse:

    Olá Bruno!
    Se não for necessário pegar as categorias automaticamente, você pode inserir o código html direto no arquivo responsável pelo menu do topo (topmenu.phtml ou top.phtml) e o css no styles.css.
    :)

    Oi Alessandra se tu ver ali ele fica com um "pedaço" do menu, bem acima do logo:


    e o menu ta desorganizado tentei mexer no css ,não adiantou talvez tu consiga enxergar além :D

    Queria que o menu ficasse entre <div class="header-container"> e <div class="main-container col1-layout">, ou onde ele ta mesmo mas só que sem aquela bagunça,hhaha

    assim:




    Abraço.
  • Jonatan Machado Moderador Global, Administrador
    Acho que esta faltando float: left; no id
    #cssmenu{
    float: left;
    }

    Outra coisa coloca z-index: 1;

    #cssmenu > ul li ul li{
    z-index: 1;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Acho que esta faltando float: left; no id
    #cssmenu{
    float: left;
    }

    Outra coisa coloca z-index: 1;

    #cssmenu > ul li ul li{
    z-index: 1;
    }

    JONATAN É AGORA ELE ficou deslocado pra ditreita dá uma olhada... :)

    http://www.mezzbrin.bravunet.com/magentomezz/index.php/
  • Jonatan Machado Moderador Global, Administrador
    Agora o problema que você deixou o #cssmenu width: 160%; o correto e 100%
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Agora o problema que você deixou o #cssmenu width: 160%; o correto e 100%

    Oi Jonatan eu coloquei 160% pq em 100 % ele fica como na imagem:


  • Jonatan Machado Moderador Global, Administrador
    Ele fica assim por que esse e o tamanho do da sua loja você terá que diminuir o tamanho dos botoes ou retirar alguns botoes
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ele fica assim por que esse e o tamanho do da sua loja você terá que diminuir o tamanho dos botoes ou retirar alguns botoes

    Mas acho que tem como aumentar esse tamanho,não!? :)
  • Jonatan Machado Moderador Global, Administrador
    Da pra aumentar sim mais essa tamanho ja e o máximo, maior que isso em monitores menores vai ser cortado parte do menu.

    Faça as alterações e visualize seu site em uma resolução menor vai ver que parte do menu nao esta aparecendo. outra opçao seria colocar o tamanho em porcentagem eu particularmente não gosto mais e uma opção tambem
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Eu fiz um menu mais simples...

    mas ele fica 2 a 2 ,a hahaha
    já alterei o css dele e não dele fica normal :lol:

    http://www.mezzbrin.bravunet.com/magentomezz/index.php/



    fiz como a Alessandra falou, coloquei o html no top.phtml e o css coloquei no style..css



    &lt;!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&gt;
    &lt;html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"&gt;
    &lt;head&gt;
    &lt;meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/&gt;
    &lt;title&gt;Menu&lt;/title&gt;

    &lt;link rel=\"stylesheet\" href=\"style.css\"/&gt;

    &lt;/head&gt;

    &lt;body&gt;

    &lt;ul&gt;
    &lt;li class=\"green\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/home.png\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/\"&gt;&lt;/a&gt;Página Inicial&lt;/a&gt;&lt;/p&gt;




    &lt;/li&gt;

    &lt;li class=\"lilas\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/aniversario.png\" width=\"48\" height=\"48\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/aniversarios.html\"&gt;Aniversários&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;li class=\"yellow\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/school7.png\" width=\"48\" height=\"48\"/&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/escolas.html\"&gt;Escolas&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;li class=\"blue\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/Baby-cot-256.png\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/cha-de-fraldas.html\"&gt;Chá de Fraldas&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;li class=\"verde\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/gift49.png\" width=\"48\" height=\"48\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/presentes.html\"&gt;Presentes&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;li class=\"laranja\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/formatura.png\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/formaturas.html\"&gt;Formaturas&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;li class=\"red\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/empresas.png\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/empresas.html\"&gt;Empresas&lt;/a&gt;&lt;/p&gt;



    &lt;/li&gt;
    &lt;li class=\"purple\"&gt;
    &lt;p&gt;&lt;img src=\"https://uscentral3.myserverhosts.com:2083/cpsess9887577892/viewer/home%2fmezzbrin%2fpublic_html%2fmagentomezz%2fskin%2ffrontend%2fdefault%2fcar_store%2fimages/graduate1.png\" /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;a href=\"http://www.mezzbrin.bravunet.com/magentomezz/index.php/faleconosco.html\"&gt;Fale conosco&lt;/a&gt;&lt;/p&gt;

    &lt;/li&gt;
    &lt;/ul&gt;

    &lt;/body&gt;
    &lt;/html&gt;




    */MENU CUSTOMIZADO*/


    @charset \"utf-8\";
    /* CSS Document */

    body{

    width:100%;


    font-family:\"Lucida Grande\",arial,sans-serif;background:#F3F3F3;

    }

    ul{

    margin:0;padding:0;
    }
    li{
    width:200px;
    height:120px;
    float:left;
    color:#FFF;
    text-align:center;
    overflow:hidden;
    }
    a{
    color:#FFF;text-decoration:none;}p{padding:0px 5px;
    }
    .subtext{
    padding-top:15px;
    }

    .green{
    background:#6AA63B top left no-repeat;




    }
    .yellow{background:#FBC700 top left no-repeat;
    }
    .red{
    background:#D52100 top left no-repeat;
    }
    .purple{
    background:#5122B4 top left no-repeat;

    }
    .lilas{background:#b215a0 top left no-repeat;
    }
    .verde{background:#3fc11f top left no-repeat;
    }
    .laranja{background:#f68d0d top left no-repeat;
    }
    .blue{background:#0292C0 top left no-repeat;
    }
    .blue{background:#0292C0 top left no-repeat;
    }








  • Jonatan Machado Moderador Global, Administrador
    E o mesmo caso de antes do float:left;
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    Se voce utilizar esse css ai vai alterar todos os li e ul vai desconfigurar todo o site coloca uma id ou class nesses ul e li
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Se voce utilizar esse css ai vai alterar todos os li e ul vai desconfigurar todo o site coloca uma id ou class nesses ul e li


    i agora tu me confundiu mais ainda,vou tentar aqui ,obrigado beleza
  • Jonatan Machado Moderador Global, Administrador

    Errado
    html

    &lt;ul&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;/ul&gt;

    css

    ul{

    margin:0;padding:0;
    }
    li{
    width:200px;
    height:120px;
    float:left;
    color:#FFF;
    text-align:center;
    overflow:hidden;
    }

    Certo
    html

    &lt;ul id=\"cssmenu\"&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;/ul&gt;

    css

    ul#cssmenu{
    float:left;
    margin:0;
    padding:0;
    }
    ul#cssmenu li{
    width:200px;
    height:120px;
    float:left;
    color:#FFF;
    text-align:center;
    overflow:hidden;
    }
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Errado
    html

    &lt;ul&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;/ul&gt;

    css

    ul{

    margin:0;padding:0;
    }
    li{
    width:200px;
    height:120px;
    float:left;
    color:#FFF;
    text-align:center;
    overflow:hidden;
    }

    Certo
    html

    &lt;ul id=\"cssmenu\"&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;/li&gt;
    &lt;/ul&gt;

    css

    ul#cssmenu{
    float:left;
    margin:0;
    padding:0;
    }
    ul#cssmenu li{
    width:200px;
    height:120px;
    float:left;
    color:#FFF;
    text-align:center;
    overflow:hidden;
    }
    Olá Jonatan,

    Eu estava de férias,voltei hj e dei uma arrumada no menu,fiz tudo do zero mesmo,consegui faze-lo :D , mas agora eu tenho que alterar os sub menus,pra que fiquem com a mesma cor da sua categoria mae, tipo quando clico no botão aniversários ele abre o sub menu,só que ele é laranja,quero trocar pra mesma cor,mas pelo que percebi,ele é um padrão pra todos os li e a imagem é na horizontal,e tbm quando estou na home não aparece as sub-categorias , aparece somente quando eu estou em uma categoria :cry:
    O css tá assim:

    /********** &lt; Navigation */
    .nav-container {clear: both; float: left; margin: 15px 0 0; background: url(../images/bkg_navigation.png) no-repeat left top; width: 1130px;}
    #nav { width:1130px; margin:0 auto;font-size:18px; float: left;}

    /* All Levels */ /* Style consistent throughout all nav levels */
    #nav li { position:relative; text-align:left; }
    #nav li.over { z-index:998; }
    #nav a,
    #nav a:hover { display:block; line-height:30px; text-decoration:none; }
    #nav span { display:block; cursor:pointer; white-space:nowrap; }
    #nav li ul span {white-space:normal; }
    #nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
    #nav ul li.parent li a { background-image:none; }

    /* 0 Level */
    #nav li { float:left; }
    #nav li.active a { color:#ffffff; }
    #nav a { float:left; padding:5px 23px 6px; color:#ffffff; font-weight:normal; }
    #nav li.over a,
    #nav a:hover { }
    /* 1st Level */
    #nav ul li,
    #nav ul li.active { float:none; margin:0; padding-bottom:1px; background:url(../images/bkg_sub.png) repeat-x left top; }
    #nav ul li.last {padding-bottom:0; }

    #nav ul a,
    #nav ul a:hover { float:none; padding:0; background:none; }
    #nav ul li a { font-weight:normal !important; }

    /* 2nd Level */
    #nav ul,
    #nav div { position:absolute; width:12em; top:40px; left:-10000px; border:1px solid #fd9000;}
    #nav div ul { position:static; width:auto; border:none; }

    /* 3rd+ Level */
    #nav ul ul,
    #nav ul div { top:5px; margin: 0 0 0 68px; }

    #nav ul li a { background:#ecf3f6; }
    #nav ul li a:hover { background:#d5e4eb; }
    #nav ul li a,
    #nav ul li a:hover { color:#ffffff !important; }
    #nav ul span,
    #nav ul li.last li span { padding:3px 22px 4px; }

    /* Show menu */
    #nav li ul.shown-sub,
    #nav li div.shown-sub { left:0; z-index:999; }
    #nav li .shown-sub ul.shown-sub,
    #nav li .shown-sub li div.shown-sub { left:100px; }



    #nav li.level0 a {line-height: 30px; background: url(../images/bkg_sepa-nav.png) no-repeat right top;}
    #nav li.level0 ul li {padding: 3px 22px 4px;}
    #nav li.level0 ul li span {padding: 0;}
    #nav li.level-top ul li a {line-height: 20px!important; background: 0 none;}

    #nav li.first:hover {background: url(../images/bkg_hover-first-navigation.png) no-repeat left top;}
    #nav li:hover {background: url(../images/bkg_sub-hover.png) no-repeat left top;}
    #nav li.level0 ul li:hover {background: url(../images/bkg_sub-hover.png) no-repeat left top;}

    /********** Navigation &gt; */


    obrigado!

    http://www.mezzbrin.bravunet.com/magentomezz/index.php/
  • Jonatan Machado Moderador Global, Administrador
    Suas sub categorias nao estão aparecendo
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Suas sub categorias nao estão aparecendo

    Sim, mas somente na página inicial, quando clica em uma categoria fica o sub aparece, o único menu que tem opção de sub é, o de aniversários.
  • Jonatan Machado Moderador Global, Administrador
    Adiciona no style.css sendo que nav-1 é sua primeira cateroria a segunda seria nav-2 assim sucessivamente. voce tera que mudar somente a cor para a desejada

    #nav li.nav-1 ul li a {
    background: none repeat scroll 0 0 #000000;
    }
    #nav li.nav-2 ul li a {
    background: none repeat scroll 0 0 #FFFFFF;
    }


    Obs: As class id e arquivos depende de cada template.
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Adiciona no style.css sendo que nav-1 é sua primeira cateroria a segunda seria nav-2 assim sucessivamente. voce tera que mudar somente a cor para a desejada


    #nav li.nav-1 ul li a {
    background: none repeat scroll 0 0 #000000;
    }
    #nav li.nav-2 ul li a {
    background: none repeat scroll 0 0 #FFFFFF;
    }


    Obs: As class id e arquivos depende de cada template.

    No menu aquele colorido é uma imagem... dae tem o hover que fica laranja quando passa o mouse tenho que trocar isso para que fique uma cor mais clara ou mais escura de acordo com o botão... e no sub-menu agua mineral e latinha mint to be é uma imagem laranja padrão do tema , em aniversários por exemplo quero colocar todos os submenus em "roxo" :D
  • Jonatan Machado Moderador Global, Administrador
    Seira quase a mesma coisa #nav li.nav-1 porem agora com :hover so voce verificar qual class terá que alterar
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Seira quase a mesma coisa #nav li.nav-1 porem agora com :hover so voce verificar qual class terá que alterar


    Esse é o navigation do meu tema :


    /********** &lt; Navigation */
    .nav-container {clear: both; float: left; margin: 15px 0 0; background: url(../images/bkg_navigation.png) no-repeat left top; width: 1130px;}
    #nav { width:1130px; margin:0 auto;font-size:18px; float: left; }

    /* All Levels */ /* Style consistent throughout all nav levels */
    #nav li { position:relative; text-align:left; }
    #nav li.over { z-index:998; }
    #nav a,
    #nav a:hover { display:block; line-height:30px; text-decoration:none; }
    #nav span { display:block; cursor:pointer; white-space:nowrap; }
    #nav li ul span {white-space:normal; }
    #nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
    #nav ul li.parent li a { background-image:none; }

    /* 0 Level */
    #nav li { float:left; }
    #nav li.active a { color:#ffffff; }
    #nav a { float:left; padding:5px 23px 6px; color:#ffffff; font-weight:normal; }
    #nav li.over a,
    #nav a:hover { }
    /* 1st Level */
    #nav ul li,
    #nav ul li.active { float:none; margin:0; padding-bottom:1px; background:url(../images/bkg_sub.png) repeat-x left top; }
    #nav ul li.last {padding-bottom:0; }

    #nav ul a,
    #nav ul a:hover { float:none; padding:0; background-color:#0e6e37; }
    #nav ul li a { font-weight:normal !important; }

    /* 2nd Level */
    #nav ul,
    #nav div { position:absolute; width:12em; top:40px; left:-10000px; border:1px solid #fd8f00;}
    #nav div ul { position:static; width:auto; border:none; }

    #nav li.nav-1 ul li a {
    background: none repeat scroll 0 0 #000000;
    }
    #nav li.nav-2 ul li a {
    background: none repeat scroll 0 0 #FFFFFF;
    }

    /* 3rd+ Level */
    #nav ul ul,
    #nav ul div { top:5px; margin: 0 0 0 68px; }

    #nav ul li a { background:#ecf3f6; }
    #nav ul li a:hover { background:#d5e4eb; }
    #nav ul li a,
    #nav ul li a:hover { color:#ffffff !important; }
    #nav ul span,
    #nav ul li.last li span { padding:3px 22px 4px; }

    /* Show menu */
    #nav li ul.shown-sub,
    #nav li div.shown-sub { left:0; z-index:999; }
    #nav li .shown-sub ul.shown-sub,
    #nav li .shown-sub li div.shown-sub { left:100px; }



    #nav li.level0 a {line-height: 30px; background: url(../images/bkg_sepa-nav.png) no-repeat right top;}
    #nav li.level0 ul li {padding: 3px 22px 4px;}
    #nav li.level0 ul li span {padding: 0;}
    #nav li.level-top ul li a {line-height: 20px!important; background: 0 none;}

    #nav li.first:hover {background: url(../images/bkg_hover-first-navigation.png) no-repeat left top;}
    #nav li:hover {background: url(../images/bkg_sub-hover.png) no-repeat left top;}
    #nav li.level0 ul li:hover {background: url(../images/bkg_sub-hover.png) no-repeat left top;}

    /********** Navigation &gt; */
    /* ======================================================================================= */
  • Jonatan Machado Moderador Global, Administrador
    vai fica mais ou nenos assim
    #nav li.nav-2:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    }

    Voce pode verificar qual sao as class com google inception
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
Entre ou Registre-se para fazer um comentário.