Menu dropdown
-
Gostaria de criar um menu dropdown como na imagem abaixo mas não sei nem por onde começar, alguem teria conhecimento para me ajudar?
-
Isso é CSS puro!! (olha eu aqui de novo)
Você está usando o Twenty né? Então os menus já são dropdown você só precisa ajeitar o style!Esse é o problema, fazer menu em css é o que eu não sei fazer, peguei o código desse menu e ele esta interligado em varios arquivos. Ai fica complicado de entender como funciona, por isso queria alguma ajuda para deixar desse jeito ai.
Bem, então eu precisaria dos códigos dos dois menus, (original e o que você quer colocar).
O original
/* =Menu -------------------------------------------------------------- */ #access { background: #1b1b1b; display: block; float: left; margin: 0 auto; width: 960px; height:41px; } #access .menu-header, div.menu { font-size: 15px; margin-left: 12px; width: 928px; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #aaa; display: block; line-height: 38px; padding: 0 10px; text-decoration: none; } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul { left: 100%; top: 0; } #access ul ul a { background: #333; line-height: 1em; padding: 10px; width: 160px; height: auto; } #access li:hover > a, #access ul ul :hover > a { background: #333; color: #fff; } #access ul li:hover > ul { display: block; } #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #fff; } * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #fff; }
o outro:
/* Menu Helpers ----------------------------------------------------------------------------------------------------*/ .menu, .menu ul { margin: 0px; padding: 0px; list-style: none; } .menu a, .menu span { display: block; } .menu a { text-decoration: none; } /* Mega Drop-Down Menu ----------------------------------------------------------------------------------------------------*/ .menu-dropdown li { position: relative; } /* Level 1 */ .menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span { float: left; } .menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span { height: 35px; padding: 0 10px; line-height: 35px; } /* Drop-Down */ .menu-dropdown .dropdown { display: none; position: absolute; top: 35px; left: 0; z-index: 100; width: 300px; /* Default */ } .menu-dropdown li:hover .dropdown, .menu-dropdown li.remain .dropdown { display: block; } .menu-dropdown .dropdown-bg > div { overflow: hidden; } /* Multi Columns, Default */ .menu-dropdown .columns2 { width: 600px; } .menu-dropdown .columns3 { width: 900px; } .menu-dropdown .columns4 { width: 1200px; } .menu-dropdown .column { float: left; } /* Level 2 */ .menu-dropdown a.level2 > span, .menu-dropdown span.level2 > span { padding: 7px 0; line-height: 21px; overflow: hidden; } /* Level 3 */ .menu-dropdown ul.level3 { padding-bottom: 10px; } .menu-dropdown li.level3 { /* Must be set in li for IE7 */ font-size: 11px; line-height: 17px; } /* Icons */ .menu-dropdown span.icon { display: block; width: 35px; height: 35px; background-repeat: no-repeat; background-position: 50% 50%; float: left; } .menu-dropdown span.icon + span, .menu-dropdown span.icon + span + span { margin-left: 35px; } .menu-dropdown li.level2 .level2 span.icon { margin-top: -7px; margin-bottom: -7px; } .menu-dropdown li.level2.hassubtitle .level2 span.icon { margin-top: -2px; } /* Subtitles */ .menu-dropdown span.title { line-height: 21px; } .menu-dropdown span.subtitle { margin-top: -1px; font-size: 9px; line-height: 10px; text-indent: 1px; } /* Sidebar/Accordion Menu ----------------------------------------------------------------------------------------------------*/ /* Accordion */ .menu-sidebar li.parent span.level1 > span { cursor: pointer; } /* Level 1 */ .menu-sidebar a.level1 > span, .menu-sidebar span.level1 > span { padding: 5px 0; line-height: 20px; } /* Remove Subtitles */ .menu-sidebar span.title { display: inline; } .menu-sidebar span.subtitle { display: none; } /* Level 2-4 */ .menu-sidebar ul.level2 { padding-bottom: 10px; } .menu-sidebar li.level1:last-child ul.level2 { padding-bottom: 0; } .menu-sidebar .level2 a > span { font-size: 11px; line-height: 17px; } /* Icons */ .menu-sidebar span.icon { display: inline-block; height: 30px; width: 30px; margin: -5px 0; background-repeat: no-repeat; background-position: 50% 50%; vertical-align: middle; } /* Line Menu ----------------------------------------------------------------------------------------------------*/ /* Level 1 */ .menu-line, .menu-line li, .menu-line li a { display: inline-block; }
@import url(../css/menus.css); /* Mega Drop-Down Menu ----------------------------------------------------------------------------------------------------*/ /* Level 1 */ .menu-dropdown { margin-bottom: -11px; } .menu-dropdown li.level1 { margin-right: 10px; padding-bottom: 11px; } .menu-dropdown a.level1, .menu-dropdown span.level1 { color: #777; } .menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span { height: 30px; line-height: 30px; } /* Set Hover and Active */ .menu-dropdown li.level1:hover .level1, .menu-dropdown li.remain .level1, .menu-dropdown li.active .level1 { color: #444; } /* Drop-Down */ .menu-dropdown .dropdown { top: 43px; border-top: 1px solid #DDD; } .menu-dropdown .dropdown-bg > div { padding: 5px; border: 1px solid #DDD; border-top: none; background: #fff; } /* Level 2 */ .menu-dropdown li.level2 { margin: 0 5px; border-top: 1px solid #ddd; } .menu-dropdown li.level2:first-child { border: none; } .menu-dropdown a.level2, .menu-dropdown span.level2 { color: #444; } /* Set Hover */ .menu-dropdown a.level2:hover { color: #d50; } /* Set Current */ .menu-dropdown a.current.level2 { font-weight: bold; } /* Level 3 */ .menu-dropdown a.level3 > span, .menu-dropdown span.level3 > span { padding-left: 15px; background: url(../images/menu_dropdown_level3.png) 0 50% no-repeat; } /* Set Hover */ .menu-dropdown a.level3:hover { color: #d50; } /* Set Current */ .menu-dropdown a.current.level3 { font-weight: bold; } /* Icons */ .menu-dropdown .level1 .level1 span.icon { width: 30px; height: 30px; margin-left: -5px; } .menu-dropdown .level1 .level1 span.icon + span, .menu-dropdown .level1 .level1 span.icon + span + span { margin-left: 25px; } .menu-dropdown li.level2 .level2 span.icon { margin-right: 4px; } .menu-dropdown li.level2 .level2 span.icon + span, .menu-dropdown li.level2 .level2 span.icon + span + span { margin-left: 39px; } /* Subtitles */ .menu-dropdown .level1 .level1 span.title { line-height: 18px; } .menu-dropdown .level1 .level1 span.subtitle { margin-top: -1px; } /* Sidebar/Accordion Menu ----------------------------------------------------------------------------------------------------*/ /* Link */ .menu-sidebar a, .menu-sidebar li > span { color: #444; } /* Hover */ .menu-sidebar a:hover, .menu-sidebar li > span:hover { color: #d50; } /* Current */ .menu-sidebar a.current { font-weight: bold; } /* Level 1 */ .menu-sidebar li.level1 { border-top: 1px solid #ddd; } .menu-sidebar li.level1:first-child { border-top: none; } .menu-sidebar li.parent .level1 > span { background: url(../images/menu_sidebar_parent.png) 100% 0 no-repeat; } .menu-sidebar li.parent.active .level1 > span { background-position: 100% -100px; } /* Level 2-4 */ .menu-sidebar ul.level2 ul { padding-left: 10px; } /* Icons */ .menu-sidebar span.icon { margin-right: 4px; } /* Line Menu ----------------------------------------------------------------------------------------------------*/ .menu-line li { margin-left: 7px; padding-left: 8px; background: url(../images/menu_line_item.png) 0 50% no-repeat; } .menu-line li:first-child { margin-left: 0; padding-left: 0; background: none; }
Será que tem como fazer?
Esse menu ai é bem complexo em, acho que dá pra fazer de uma maneira mais simples o mesmo efeito da imagem que você passou no link!
Você tem muita pressa?
Claro que dá, tudo é possível! hehehe
È que comecei a fazer o template em uma semana, e o detalhe que falta no layout é só esse menu.
Assim que fazer ele ja vou colocar o site no ar.
Queria colocar essa semana que esta chegando, mas esse menu ai esta dando trabalho.Ah sim, eu vou te ajudar. É que no momento eu to em horario de trabalho, hehehe… mas fique tranquilo, não acho que vá ser muito dificil!
Ok, obrigado pela ajuda.
Substitua todo o código original por este:
/* =Menu -------------------------------------------------------------- */ #access { background: #FFF; display: block; float: left; margin: 0 auto; width: 940px; } #access .menu-header, div.menu { font-size: 13px; margin-left: 12px; width: 928px; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #333; display: block; line-height: 38px; padding: 0 10px; text-decoration: none; } #access ul ul { border:medium #006; box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 200px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul { left: 100%; top: 0; } #access ul ul { margin-top: 1px !important; background: #FFF; line-height: 1em; padding: 10px; width: 180px; height: auto; -moz-border-radius: 10px; /* Para Firefox */ -webkit-border-radius: 10px; /*Para Safari e Chrome */ border-radius: 10px; /* Para Opera 10.5+*/ overflow:hidden; border: 1px solid #666666; } #access ul ul a { background: #FFF; line-height: 1em; padding: 10px; height: auto; border: 3px #0000CC !important; border-bottom: 1px solid #666666 !important; } #access li:hover > a, #access ul ul :hover > a { background: #CECEFF; color: #333; border: 1px solid #8484FF; -moz-border-radius: 10px; /* Para Firefox */ -webkit-border-radius: 10px; /*Para Safari e Chrome */ border-radius: 10px; /* Para Opera 10.5+*/ } #access ul li:hover > ul { display: block; } #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #333; } * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #333; } /* =Content -------------------------------------------------------------- */
Veja se é mais ou menos isso, e post aqui! 😀
Quase isso, vou te passar o site com esse menu pra você dar uma olhada.
- O tópico ‘Menu dropdown’ está fechado para novas respostas.