html - Accordion menu, when i recreate an item several times, i change the id but the functionality still opens up all items -
html - Accordion menu, when i recreate an item several times, i change the id but the functionality still opens up all items -
i have simple horizontal menu on left hand side of page. i'm trying add together more items menu; items have sub-menu's. original menu looks this:
<nav class="mainmenu"> <ul id="menu-main-menu" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42"><a href="about/index.html"><i class="icon-menu-icon"></i><span class="text">about us</span></a> <ul class="sub-menu"> <li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-733"><a href="about/index.html"><i class="icon-menu-icon"></i><span class="text">about us</span></a></li> <li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443"><a href="about/service/index.html"><i class="icon-menu-icon"></i><span class="text">service</span></a></li> <li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444"><a href="about/the-team/index.html"><i class="icon-menu-icon"></i><span class="text">the team</span></a></li> <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a href="about/careers/index.html"><i class="icon-menu-icon"></i><span class="text">careers</span></a></li> <li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a href="about/ethos/index.html"><i class="icon-menu-icon"></i><span class="text">ethos</span></a></li> </ul> </li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"><a href="portfolio/index.html"><i class="icon-menu-icon"></i><span class="text">portfolio</span></a> <ul class="sub-menu"> <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-56"><a href="project-category/architecture/index.html"><i class="icon-menu-icon"></i><span class="text">architecture</span></a></li> <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-57"><a href="project-category/interiors/index.html"><i class="icon-menu-icon"></i><span class="text">interiors</span></a></li> <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-58"><a href="project-category/landscapes/index.html"><i class="icon-menu-icon"></i><span class="text">landscapes</span></a></li> </ul> </li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-40"><a href="news/index.html"><i class="icon-menu-icon"></i><span class="text">news</span></a> <ul class="sub-menu"> <li id="menu-item-54" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-54"><a href="category/planning/index.html"><i class="icon-menu-icon"></i><span class="text">planning</span></a></li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="category/on-site/index.html"><i class="icon-menu-icon"></i><span class="text">on-site</span></a></li> <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="category/office/index.html"><i class="icon-menu-icon"></i><span class="text">office</span></a></li> <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="category/in-design/index.html"><i class="icon-menu-icon"></i><span class="text">in design</span></a></li> <li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-55"><a href="category/publications/index.html"><i class="icon-menu-icon"></i><span class="text">publications</span></a></li> <li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><a href="category/responsibility/index.html"><i class="icon-menu-icon"></i><span class="text">corporate responsibility</span></a></li> </ul> </li> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="contact/index.html"><i class="icon-menu-icon"></i><span class="text">contact</span></a></li> </ul></nav> when seek recreate menu item child/sub-menu appears fine functionality bit bonkers. let's seek duplicate "news" menu item. i'll recreate right below news , i'll alter id's 40 43 on duplicated menu item "news".
the problem when click on new item both original , new item subsidiary menus open.
i thought simple creating new id's guess failed on understanding of how works. help appreciated. give thanks you.
css:
/*****************************************/ /* sidebar */ /*****************************************/ .sidebar { position: fixed; left: -15.625em; top: 0; z-index: 100; width: 15.625em; padding-top: 2.5em; height: 100%; font-family: "freight-sans-pro", serif; background: #1c1f20; overflow-y: auto; /* open state */ /* main menu */ /* footer details (at bottome) */ } .pushed .sidebar { left: 0; } .sidebar .mainmenu { font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .sidebar .mainmenu > ul > li { padding: 1.125em 1em 0.875em; border-bottom: 1px solid #252829; } .sidebar .mainmenu > ul > li > { display: block; } .sidebar .mainmenu > ul > li > > { position: relative; top: -2px; vertical-align: middle; margin-right: 0.5em; font-size: 1.9em; color: #a4a4a4; } .sidebar .mainmenu > ul > li > a:after { position: relative; top: -1px; display: inline-block; vertical-align: middle; font-size: 1.2em; color: #a4a4a4; font-family: 'iconsstudioindigo'; content: '\e624'; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .sidebar .mainmenu > ul > li > a:only-child:after { display: none; } .sidebar .mainmenu > ul > li > ul { margin-left: 3.3em; line-height: 1.2em; font-size: 0.85em; max-height: 0; overflow: hidden; } .sidebar .mainmenu > ul > li > ul > li { -webkit-transform: translatez(0); margin: 0.35em 0; opacity: 0; } .sidebar .mainmenu > ul > li > ul > li > { display: block; color: #a4a4a4; } .sidebar .mainmenu > ul > li > ul > li > a:focus, .sidebar .mainmenu > ul > li > ul > li > a:hover { color: white; } .sidebar .mainmenu > ul > li > ul > li > { opacity: 0; margin: 2px 7px 0 0; } .sidebar .mainmenu > ul > li > ul > li:nth-child(1) { -webkit-transition: opacity 0.4s ease 0.125s; transition: opacity 0.4s ease 0.125s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(2) { -webkit-transition: opacity 0.4s ease 0.25s; transition: opacity 0.4s ease 0.25s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(3) { -webkit-transition: opacity 0.4s ease 0.375s; transition: opacity 0.4s ease 0.375s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(4) { -webkit-transition: opacity 0.4s ease 0.5s; transition: opacity 0.4s ease 0.5s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(5) { -webkit-transition: opacity 0.4s ease 0.625s; transition: opacity 0.4s ease 0.625s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(6) { -webkit-transition: opacity 0.4s ease 0.75s; transition: opacity 0.4s ease 0.75s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(7) { -webkit-transition: opacity 0.4s ease 0.875s; transition: opacity 0.4s ease 0.875s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(8) { -webkit-transition: opacity 0.4s ease 1s; transition: opacity 0.4s ease 1s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(9) { -webkit-transition: opacity 0.4s ease 1.125s; transition: opacity 0.4s ease 1.125s; } .sidebar .mainmenu > ul > li > ul > li:nth-child(10) { -webkit-transition: opacity 0.4s ease 1.25s; transition: opacity 0.4s ease 1.25s; } .sidebar .mainmenu > ul > li > ul > li.current-menu-item { opacity: 1; } .sidebar .mainmenu > ul > li.current-menu-parent > a:after, .sidebar .mainmenu > ul > li.current-menu-item > a:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .sidebar .mainmenu > ul > li.current-menu-parent > ul, .sidebar .mainmenu > ul > li.current-menu-item > ul { max-height: 10.625em; } .sidebar .mainmenu > ul > li.current-menu-parent > ul > li, .sidebar .mainmenu > ul > li.current-menu-item > ul > li { opacity: 1; } .sidebar .mainmenu .menu-item i:before { content: '\e624'; } .sidebar .mainmenu .menu-item-42 i:before { content: '\e623'; } .sidebar .mainmenu .menu-item-39 i:before { content: '\e611'; } .sidebar .mainmenu .menu-item-40 i:before { content: '\e61e'; } .sidebar .mainmenu .menu-item-41 i:before { content: '\e620'; } .sidebar .mainmenu .sub-menu .menu-item i:before { content: '\e607'; } .sidebar .footerdetails { margin: 1.92308em 1.15385em; font-size: 0.8125em; color: #a4a4a4; } .sidebar .footerdetails li { margin-top: 15px; margin-top: 0.9375rem; text-transform: uppercase; } .sidebar .footerdetails li { color: #a4a4a4; } .sidebar .footerdetails li a:focus, .sidebar .footerdetails li a:hover { color: white; } .sidebar .footerdetails .copyright li, .sidebar .footerdetails .textpages li, .sidebar .footerdetails .credit li { margin-top: 10px; margin-top: 0.625rem; text-transform: none; } .sidebar .footerdetails .textpages { margin-top: 1.53846em; } .sidebar .footerdetails .credit { margin-top: 1.15385em; } .sidebar .footerdetails .credit { color: #737575; } .sidebar .footerdetails .credit a:hover { color: #76c044; } @media screen , (min-height: 45em) { .sidebar { padding-top: 6.25em; } .sidebar .footerdetails { position: absolute; left: 15px; left: 0.9375rem; bottom: 25px; bottom: 1.5625rem; margin: 0; } .sidebar .footerdetails .textpages { margin-top: 2.69231em; } } @media screen , (min-width: 1200px) { .sidebar { left: 0; } }
i ran code , doesn't function @ menu. i'm assuming have javascript that's managing functionality. otherwise, when click menu item acts link.
here basics of css/javascript menus might helpful:
the htmlsay have next unordered list:
<ul class="menu"> <li>home</li> <li class="dropdown"><span class="togglable">products</span> <ul> <li>oranges</li> <li>apples</li> <li>bananas</li> </ul> </li> <li class="dropdown"><span class="togglable">blog</span> <ul> <li>my first post</li> <li>my lastly post</li> </ul> </li> <li>about</li> </ul> css hover menus you want show first level of menu @ first so:
.menu .dropdown>ul { position:absolute; left:-9999em; } then want display anytime menu item hovered:
.menu .dropdown:hover>ul { position:static; left:auto; } that's it. can alter bit on how want hide/show "submenus", display:none; display:block;, or opacity:0; opacity:1; (which favorite because can animate opacity), it's same thought selectors. can duplicate menu heart's content.
heck, don't need .dropdown class, target list items <ul> descendants:
ul.menu>li>ul { display:none; } ul.menu>li:hover>ul { display:block; } javascript/css hybrid (aka "togglers") i utilize minimal javascript , allow css of magic. here's jquery (if can whip vanillajs, sense free edit this):
$('.menu .togglable')click(function(){ $(this).toggleclass('toggled'); homecoming false; //just browser doesn't follow link if it's anchor } this turn on/off .toggled class our .togglable span tags. css:
.togglable+ul { display:none; } .togglable.toggled+ul { display:block; } /* '+' selects <ul> sibling right after <span class="togglable"> */ that's it. go crazy css, these basics css hover/togglable menus.
html css menu
Comments
Post a Comment