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

Alterar cor de cada menu e sub-menu

brunowdbrunowd Usuário
editado May 2014 em CSS
Esse é o meu projeto http://www.mezzbrin.bravunet.com/magentomezz/index.php/

ese css no NAVigation, preciso alterar o menu ,mas não consigo!


/********** < Navigation */
.nav-container {
background: url(\"../images/bkg_navigation.png\") no-repeat scroll left top rgba(0, 0, 0, 0);
clear: both;
float: left;
margin: -31px 0 0;
position: relative;
width: 100%;
top: 41px;
}
#nav { width:100%; margin:0 auto;font-size:27px; float: left; }

/* All Levels */ /* Style consistente ao longo de todos os níveis de navegação */
#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_navigation.png) 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-color: rgb(220, 150, 0); }

#nav ul li .category-escolas .active { float:none; margin:0; padding-bottom:1px; background-color: rgb(63, 193, 31); }


#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) repeat left top;}
#nav li.level0 ul li:hover {background: url(../images/bkg_sub-hover.png) no-repeat left top;}

Sei que nessa linha...

#nav ul li.active { float:none; margin:0; padding-bottom:1px; background-color: rgb(199, 150, 255); }


consegui alterar o cor do fundo de todos os sub-menus para LILÁS... mas não rolou, pra deixar coloquei assim:

#nav ul li .category-escolas .active { float:none; margin:0; padding-bottom:1px; background-color: rgb(199, 150, 255); } 



Alguma ideia ? :)

Comentários

  • brunowdbrunowd Usuário
    O que tô tentando fazer é deixar os sub-menu com as respectivas cores do primeiro nível de cada categoria..,

    Página Inicial - Azul.
    Aniversários - e seus sub-menus em Rosa
    Escolas - e seus sub-menus em Verde
    Chá de Fraldas - e seus sub-menus em Laranja
    Fale Conosco - Azul;
  • Jonatan Machado Moderador Global, Administrador
    Ola brunowd
    Isso voce pode fazer com css seguindo a hierarquia de classe
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • brunowdbrunowd Usuário
    disse:

    Ola brunowd
    Isso voce pode fazer com css seguindo a hierarquia de classe


    Segui essas explicações:

    http://tableless.com.br/efeito-cascata-e-especificidade-do-css/

    http://tableless.com.br/forum/discussion/189/remover-classe-css-de-elementos-filho/p1

    Mas não entendi muito bem com aquele css do meu tema, confundi totalmente,hahaha]

    Tem algum outro link pra estudo, ou outras dicas?
  • brunowdbrunowd Usuário
    esse é o top.phtml

    localizado em app/design/frontend/default/default/template/xmllinks/catalog/navigation/

    ?>
    <?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>




    <?php if($_menu): ?>
    <div class=\"nav-container\">

    <ul id=\"nav\">

    <!-- Aqui vem meu link estático / hard coded, no caso estou apontando para a página incial -->

    <li id=\"\" class=\"level0 level-top first\"><a class=\"level-top\" href=\"<?php echo $this->getUrl('') ?>\"><span>Página Inicial</span></a></li>




    <!-- Aqui segue o código normalmente -->



    <?php echo $_menu ?>

    <li id=\"\" class=\"level0 level-top first\"><a class=\"level-top\" href=\"<?php echo $this->getUrl('faleconosco') ?>\"><span>Fale Conosco</span></a></li>

    </ul>



    <ul class=\"cart-nav\">
    <?php
    $_quote = Mage::getSingleton('checkout/session')->getQuote();
    $_cartQty = $_quote->getItemsQty() * 1;
    ?>
    <li class=\"first\"><a href=\"<?php echo $this->getUrl('checkout/cart') ?>\"><strong> <span>Carrinho</span></strong></a></li>
    <li class=\"last\"><a href=\"<?php echo $this->getUrl('checkout/cart') ?>\"><strong><?php echo $_cartQty;?><span>ITEMS</span></strong></a></li>
    </ul>



    </div>
    <?php endif ?>
  • brunowdbrunowd Usuário
    tanto que não entendi e fiz assim...

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

    .category-escolas li.level0 ul li:hover {background-color: rgb(162, 0, 37);
    }


    E não rolou smile_sweating
  • brunowdbrunowd Usuário
    consegui :D

    mas somente as subcategorias de convites não preencheu a cor totalmente ..

    css:


    /* MENU PRINCIPAL ======================================================================= */

    /* STATIC */

    #nav li.level0.nav-1.level-top { background-color:#e8122b; repeat-x left top;}
    #nav li.level0.nav-2.level-top { background-color:#78c724; repeat-x left top;}
    #nav li.level0.nav-3.level-top { background-color:#14abe5; repeat-x left top;}
    #nav li.level0.level-top { background-color:#2D56A5; repeat-x left top;}

    /* STATIC */

    /* HOVER */

    #nav li.level0.level-top:hover { background-color:#204487;}
    #nav li.level0.nav-1.level-top:hover { background-color:#ba061b; no-repeat left top}
    #nav li.level0.nav-2.level-top:hover { background-color:#5ba30f; no-repeat left top}
    #nav li.level0.nav-3.level-top:hover { background-color:#0d89ba; no-repeat left top}

    /* HOVER */

    /* MENU PRINCIPAL ======================================================================= */

    /* sub menu */

    /* aniversarios */
    #nav li.level1.nav-1-1 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x } /* sub BANNERS */
    #nav li.level2.nav-1-1-1 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x } /* sub 90x 110 */
    #nav li.level2.nav-1-1-2 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub 1x 150 */

    #nav li.level1.nav-1-2 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CANECAS */
    #nav li.level2.nav-1-2-3 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x } /* sub c. ceramica */
    #nav li.level2.nav-1-2-4 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub c. termica */

    #nav li.level1.nav-1-3 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CONVITES */
    #nav li.level2.nav-1-3-5 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub AVULSO */
    #nav li.level2.nav-1-3-6 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CARD */
    #nav li.level2.nav-1-3-7 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub COMPLETO */
    #nav li.level2.nav-1-3-8 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub VIRTUAL */

    #nav li.level1.nav-1-4 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub DOCES */
    #nav li.level2.nav-1-4-9 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub MINT TO BE */
    #nav li.level2.nav-1-4-10 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub TUBINHO */

    #nav li.level1.nav-1-5 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub ESCOLAR */
    #nav li.level2.nav-1-5-11 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CANETA TUBINHO */
    #nav li.level2.nav-1-5-12 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub ESTOJO */
    #nav li.level2.nav-1-5-13 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub LANCHEIRA */
    #nav li.level2.nav-1-5-14 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub ESTRELA */


    #nav li.level1.nav-1-6 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub GARRAFINHAS */
    #nav li.level2.nav-1-6-15 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub AGUA MINERAL */
    #nav li.level2.nav-1-6-16 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub SQUEZEE 300 */
    #nav li.level2.nav-1-6-17 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub SQUEZEE 550 */
    #nav li.level2.nav-1-6-18 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub ALUMINIO */


    #nav li.level1.nav-1-7 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub IMANTADOS */
    #nav li.level2.nav-1-7-19 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CALENDARIOS */
    #nav li.level2.nav-1-7-20 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub IMÃS */
    #nav li.level2.nav-1-7-21 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub LOUSAS */

    #nav li.level1.nav-1-8 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub JOGOS */
    #nav li.level2.nav-1-8-22 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub BOLINHA SABÃO */
    #nav li.level2.nav-1-8-23 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub BLOCÃO */
    #nav li.level2.nav-1-8-24 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub FRISBEE */
    #nav li.level2.nav-1-8-25 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub IO-IO */
    #nav li.level2.nav-1-8-26 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub DOMINÓ */
    #nav li.level2.nav-1-8-27 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub MEMÓRIA */
    #nav li.level2.nav-1-8-28 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub QUEBRA-CABEÇA */

    #nav li.level1.nav-1-9 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub UTILIDADES */
    #nav li.level2.nav-1-9-29 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub AGENDA */
    #nav li.level2.nav-1-9-30 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub BALDINHO DE PIPOCA */
    #nav li.level2.nav-1-9-31 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub BALDINHO DE PRAIA */
    #nav li.level2.nav-1-9-32 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub BLOQUINHO */
    #nav li.level2.nav-1-9-33 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CDMUSICA */
    #nav li.level2.nav-1-9-34 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CHAVEIRO */
    #nav li.level2.nav-1-9-35 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub MARCA PAGINAS */
    #nav li.level2.nav-1-9-36 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub MOUSE PAD */
    #nav li.level2.nav-1-9-37 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub PORTA CDS */
    #nav li.level2.nav-1-9-38 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub PORTA ÓCULOS */
    #nav li.level2.nav-1-9-39 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub R. CRESC. */
    #nav li.level2.nav-1-9-40 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub REL. DE MESA */



    /* escolas */
    #nav li.level1.nav-2-1 {float:none; margin:0; padding-bottom:1px; background-color:#78c724; repeat-x } /* sub PAIS */
    #nav li.level1.nav-2-2 {float:none; margin:0; padding-bottom:1px; background-color:#78c724; repeat-x } /* sub MÃES */
    #nav li.level1.nav-2-3 {float:none; margin:0; padding-bottom:1px; background-color:#78c724; repeat-x } /* sub CRIANÇAS */
    #nav li.level1.nav-2-4 {float:none; margin:0; padding-bottom:1px; background-color:#78c724; repeat-x } /* sub AVÓS */

    /* cha de bebe */
    #nav li.level1.nav-3-1 {float:none; margin:0; padding-bottom:1px; background-color:#14abe5; repeat-x } /* sub MAMADEIRAS */
    #nav li.level1.nav-3-2 {float:none; margin:0; padding-bottom:1px; background-color:#14abe5; repeat-x } /* sub MINI LATINHA */
    #nav li.level1.nav-3-3 {float:none; margin:0; padding-bottom:1px; background-color:#14abe5; repeat-x } /* sub POTE QUADRADO */

    /* sub menu */

    /* sub-hover */

    #nav li.level1.nav-1.level-top:hover{ background-color:#ba061b; no-repeat left top } /* aniversarios */
    #nav li.level1.nav-2.level-top:hover { background-color:#5ba30f; no-repeat left top } /* escolas */
    #nav li.level1.nav-3.level-top:hover { background-color:#0d89ba; no-repeat left top } /* cha de bebe */


    #nav li.level0.nav-1 ul li:hover { float:none; margin:0; padding-bottom:1px; background-color:#ba061b; repeat-x left top; }
    #nav li.level0.nav-2 ul li:hover { float:none; margin:0; padding-bottom:1px; background-color:#5ba30f; repeat-x left top; }
    #nav li.level0.nav-3 ul li:hover { float:none; margin:0; padding-bottom:1px; background-color:#0d89ba; repeat-x left top; }
    /* sub-hover */

    /* MENU PRINCIPAL ======================================================================= */


    Obrigado.
  • brunowdbrunowd Usuário
    Eu tinha passado o código do bloco de notas e não do meu css :D , corrigindo...


    #nav li.level1.nav-1-3 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x}   /* sub CONVITES */
    #nav li.level2.nav-1-3-5 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub AVULSO */
    #nav li.level2.nav-1-3-6 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub CARD */
    #nav li.level2.nav-1-3-7 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub COMPLETO */
    #nav li.level2.nav-1-3-8 {float:none; margin:0; padding-bottom:1px; background-color:#e8122b; repeat-x} /* sub VIRTUAL */


    tudo certo agora !
Entre ou Registre-se para fazer um comentário.