Databases
StackOverflow2013
Postsdbo
POResponsive css menu with multiple levels
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive css menu with multiple levels
    primarykey
    data
    text
    <p>am having a problem getting multiple levels working on a responsive css menu, the base of the menu i have followed <a href="http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/" rel="nofollow">this tutorial on tuts.com</a></p> <p>I need more than 2 sub levels on this menu for my site, though when i add the extra 's to the html, the extra level is not working as it should, am sure its possible to add an extra level to the original menu, but i cant figure out what extra css i need, i had tried adding extra css code for li li li li but thats not working for me.</p> <p>the extra level displays wwith the 2nd sublevel, where it should only display for the hover of the 2nd sub-menu.</p> <p>i have created a jsfiddle (my first one) here: <a href="http://jsfiddle.net/DizzyHigh/Bpubu/4/" rel="nofollow">http://jsfiddle.net/DizzyHigh/Bpubu/4/</a></p> <p>html:</p> <pre><code>&lt;div id="left_container"&gt;&lt;/div&gt; &lt;div class="container"&gt; &lt;a class="toggleMenu" href="#"&gt;Menu&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li class="test"&gt; &lt;a href="#"&gt;HOME&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;LOCATIONS&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li&gt; &lt;a href="#"&gt;Boroughs&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li&gt; &lt;a href="#"&gt;Enfield&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;E-Locations&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;E-Unit Bases&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;E-Parking&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Barnet&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;B-Locations&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;B-Unit Bases&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;B-Parking&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Maps&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li&gt; &lt;a href="#"&gt;Enfield map&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;ME-Locations&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;ME-Unit Bases&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;ME-Parking&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Barnet Map&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;MB-Locations&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;MB-Unit Bases&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;MB-Parking&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;CONTACT&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;LINKS&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="right_container"&gt;&amp;nbsp;&lt;/div&gt; </code></pre> <p>css:</p> <pre><code>body, nav, ul, li, a {margin: 0; padding: 0;} body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } a {text-decoration: none;} .container { width: 90%; max-width: 900px; margin: 10px auto; } .toggleMenu { display: none; background: #666; padding: 10px 15px; color: #fff; } .nav { list-style: none; *zoom: 1; background:#175e4c; } .nav:before, .nav:after { content: " "; display: table; } .nav:after { clear: both; } .nav ul { list-style: none; width: 9em; } .nav a { padding: 10px 15px; color:#fff; } .nav li { position: relative; } .nav &gt; li { float: left; border-top: 1px solid #104336; } .nav &gt; li &gt; .parent { background-image: url("images/downArrow.png"); background-repeat: no-repeat; background-position: right; } .nav &gt; li &gt; a { display: block; } .nav li ul { position: absolute; left: -9999px; } .nav &gt; li.hover &gt; ul { left: 0; } .nav li li.hover ul { left: 100%; top: 0; } .nav li li a { display: block; background: #1d7a62; position: relative; z-index:100; border-top: 1px solid #175e4c; } .nav li li li a { background:#249578; z-index:200; border-top: 1px solid #1d7a62; } @media screen and (max-width: 768px) { .active { display: block; } .nav &gt; li { float: none; } .nav &gt; li &gt; .parent { background-position: 95% 50%; } .nav li li .parent { background-image: url("images/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .nav ul { display: block; width: 100%; } .nav &gt; li.hover &gt; ul , .nav li li.hover ul { position: static; } } </code></pre> <p>JS:</p> <pre><code> $(document).ready(function() { var ww = document.body.clientWidth; $(".nav li a").each(function() { if ($(this).next().length &gt; 0) { $(this).addClass("parent"); }; }) $(".toggleMenu").click(function(e) { e.preventDefault(); $(this).toggleClass("active"); $(".nav").toggle(); }); adjustMenu(); var adjustMenu = function() { if (ww &lt; 768) { $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".nav").hide(); } else { $(".nav").show(); } $(".nav li").unbind('mouseenter mouseleave'); $(".nav li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww &gt;= 768) { $(".toggleMenu").css("display", "none"); $(".nav").show(); $(".nav li").removeClass("hover"); $(".nav li a").unbind('click'); $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } } $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); }) </code></pre> <p>can any css gurus point me in the right direction?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDizzy Bryan High
    1. USDizzy Bryan High
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload