Search the Community
Showing results for tags 'submenu'.
Found 5 results
-
Hi I am in the process of replacing an old menu on a website and came across the W3Schools menu guides. I have recreated most of the menu using the example and code on the 'Drop down menu in NavBar' page (https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) and I am really pleased with how it is coming along. However, my HTML and CSS skills are quite limited and I am stuck on two things that I am hoping someone here can help me with. I have done a few searches on these forums but not found quite what I am looking for or something that fits with what I have done so far and I cannot see an example on this site that achieves what I am trying to do. I need to add some sub-menus to the drop down items. For example, in the code given on the above page, the 'Dropdown' menu has three items, Link 1, Link 2 and Link 3. I need to find out how to have Link 1 (for example) provide access to another list of items, e.g. Link 1a, Link 1b, Link 1c etc.. Ideally, I would like this sub-menu to appear to the right of the source item. This also leads the second thing I have not been able to work out, but I think is probably a lot simpler. On the menu item that links to a sub-menu, I would like to put a right-arrow to show that a sub-menu is available. Whilst I can put the arrow on the item, I have not yet worked out how to right-align the arrow so, at the moment, it appears immediately after the menu item name. I have seen mention on some forum posts about li items and child-items but this appears to relate to different types of code for the menu in general and not what I have used so far. If it isn't possible to do this using the current method, I am happy to change to something else and any pointers, or links to example code would be much appreciated. Thanks in advance for any help anyone can offer. David
-
Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
-
anyone have any recommendations? using overflow-y: auto for a long submenu, submenu closes when using scrollbar. trying to keep this all in CSS… .SubMenu.MenuLevel1 {max-height: 300px;overflow-y: auto;overflow-x: hidden;margin:0px;padding:0px;border:0px;} -
So I have a standard two level menu in one php file that I show on all the pages on a website. The menus and submenus are nested <ul> elements. When you go to a page, I would like the submenu that includes that page to be open by default. And also to stay open if another submenu isn't hovered over. I think I can figure out the menu transformations. The part I need help on is finding the submenu that the active page is contained in so I can set that one to be open. -
Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate. So, here is the code I have so far: <div id="topnav"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="#">Over Meves</a> <ul class="submenu"> <li><a href="#" class="suba">Historie</a></li> <li><a href="#" class="suba">Onze mensen</a></li> <li><a href="#" class="suba">Werkzijze</a></li> </ul> </li> <li> <a href="vervolg3.html">Disciplines</a> <ul class="submenu"> <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li> <li><a href="#" class="suba">Elektrotechniek</a></li> <li><a href="#" class="suba">Sanitaire techniek</a></li> <li><a href="#" class="suba">Energiebesparingstechniek</a></li> <li><a href="#" class="suba">Bouwfysica en geluid</a></li> <li><a href="#" class="suba">Diensten energiebesparing</a></li> </ul> </li> <li> <a href="#">Expertise</a> <ul class="submenu"> <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> <li><a href="#" class="suba">Zorg & Welzijn</a></li> <li><a href="#" class="suba">Milieu & Energie</a></li> <li><a href="#" class="suba">Beheer & Onderhoud</a></li> <li><a href="#" class="suba">EPA & EPC</a></li> <li><a href="#" class="suba">Legionella beheersing</a></li> </ul> </li> <li> <a href="#">Contact</a> <ul class="submenu"> <li><a href="#" class="suba">Adres & route</a></li> <li><a href="#" class="suba">Werken bij</a></li> </ul> </li> </ul> </div> The javascript: var ddmenuitem = 0;function jsddm_open(){ jsddm_close(); ddmenuitem = $(this).find('ul.submenu').css('display', 'block');}function jsddm_close(){if(ddmenuitem) ddmenuitem.css('display', 'none');}$(document).ready(function(){ $('#topnav > ul > li').bind('click', jsddm_open) $('#topnav ul li a.suba').click(function(e){ if ($(this).attr('class') != 'active'){ $('#topnav ul li a.suba').removeClass('active'); $(this).addClass('active'); } }); $('a').filter(function(){ return this.href === document.location.href; }).addClass('active') $("ul.submenu > li > a").each(function () { var currentURL = document.location.href; var thisURL = $(this).attr("href"); if (currentURL.indexOf(thisURL) != -1) { $(this).parent("ul.submenu").css('display', 'block'); } });}); And the css: #topnav ul{list-style: none;padding: 0;margin: 0;}#topnav ul li{float: left;margin: 0;padding: 0;}#topnav ul li a{padding: 5px 15px;color: #00537F;text-decoration: none;display: block;font-weight: bold;}#topnav ul li a:link{color: #FFF;text-decoration: none;}#topnav ul li a:visited{color: #FFF;text-decoration: none;}#topnav ul li a:hover{color: #FFF;text-decoration: underline;}#topnav ul li a.active{text-decoration: underline;color: #FFF;}/*#topnav ul li:hover .submenu{display:block;}*/#topnav ul li ul.submenu{float: left;padding: 4px 0;position: absolute;left: 0;top: 24px;display: none;background: #e0e0e0;color: #00537F;}#topnav ul li ul.submenu a{display: inline;color: #00537F;padding: 4px 8px;}#topnav ul li ul.submenu li{border-right-width: 1px;border-right-style: solid;border-right-color: #00537F;}#topnav ul li ul.submenu li:last-child{border-right-style: none;}#topnav ul li ul.submenu a:link{color: #00537F;}#topnav ul li ul.submenu a:visited{color: #00537F;}#topnav ul li ul.submenu a:hover{text-decoration: underline;color: #00537F;}#topnav ul li ul.submenu li.active{text-decoration: underline;color: #00537F;}#topnav ul li ul.submenu a.active{text-decoration: underline;color: #00537F;}
