I have a multi-level horizontal menu with unknown number of top level and sub level menus. I want to display this menu as a single line and display as many as the display width will allow. I'm planning to then put all the menu items in a modal dialogue box which the icon is right justified in the menu.
I'm using zurb foundation 5 and I need the menu to cater for different screen widths but I'm 99.9% certain this is a css problem, not foundation. (ie I don't want to code for medium/large/xlarge)
My problem is that I'm having trouble limiting the menu to a single level. It spills/overflows onto subsequent lines but if I specify a height and overflow:hidden, it then breaks the multi-level sub levels of the menu.
I've created a jsfiddle here http://jsfiddle.net/gavtwtd/4tkpoL74/6/
but please note you may have to widen the result pane to see the problem.
Ah, I must accompany jsfiddle with my code, so here's some code:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li>☰</li>
</ul>
<ul class="left" style="width:90%;">
<li class="has-dropdown">Menu 1
<ul class="dropdown">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
<li>Sub menu 4</li>
<li>Sub menu 5</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 7</li>
<li>Menu 99</li>
</ul>
</section>
</nav>
</div>
<div id="myModal" class="reveal-modal" data-reveal>full menu here <a class="close-reveal-modal">×</a></div>
Related
Here is my problem is there a way to wrap WordPress UL submenu to div?
WordPress output is this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</li>
</ul>
And I need to get this:
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3
<div class="wrap">
<ul class="sub-menu">
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</div>
</li>
</ul>
Using $.fn.wrap:
$('.sub-menu').wrap('<div class="wrap">');
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
I've created this menu with css. But it wraps if the width of the window is smaller than then entire menu.
How do you stop it from wrapping to the next line?
see code.
http://jsfiddle.net/49RCL/1/
<nav>
<ul class="siteNav">
<li><img src="http://s7.postimg.org/m54vbq4kn/logo.png" width="166" height="60"</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li><form action=""><input type="color" name="favcolor" size="26" placeholder="Search"></form></li>
</ul>
</nav>
add
white-space: nowrap;
to your .siteNav
http://jsfiddle.net/URL4g/
Using CSS, is it possible to select the first N items matching a class, when they don't have a common parent? I know it is possible when they have a common parent, using nth-child I believe, but that only works when all the elements have a common parent, because that's the only case when they are siblings.
Here's an example of my specific situation. In this example, I want to select the <li> for tasks 1 to 5, using CSS. Possible?
<div id="todo-lists">
<ul class="list">
<li>Task 1</li>
<li>Task 2</li>
</ul>
<ul class="list">
<li>Task 3</li>
<li>Task 4</li>
<li>Task 5</li>
<li>Task 6</li>
</ul>
<ul class="list">
<li>Task 7</li>
<li>Task 8</li>
<li>Task 9</li>
<li>Task 10</li>
</ul>
</div>
<div id="header">
<div id="logo"></div>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
<div id="fillrest"></div>
</div>
How do I apply CSS to this to make the fixed-width #logo sit next to each list member and then the #fillrest div... fill the rest of the width. (#header width should be 100%).
Having real trouble with this one...
Gausie
jQuery Solution:
http://www.jsfiddle.net/JeaffreyGilbert/aePGr/
Preview: