I have a nav that includes a drop down.
<ul>
<li class="n1">Nav 1</li>
<li class="n2">Nav 2</li>
<li class="n3">Nav 3
<ul class="dropdown">
<li>DropDown 1</li>
<li>DropDown 2</li>
<li>DropDown 3</li>
</ul>
I wish to add spacing below the nav, so I use margin-bottom.
But the margin is not correct, it's like the UL is not it's full height, I fix this with:
overflow: hidden
But then the hidden drop down gets cut off.
Any ideas on a fix?
You can try using padding. That will allow you some extra room around each element.
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
I am looking for a Side Nav with multilevel items. By default zurb foundation 5 does not support sub menus for some reason.
http://jsfiddle.net/pvG7V/1/
<ul class="side-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li class="divider"></li>
<li>Link 3
</li>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<li>Link 4
</li>
</ul>
Can this be changed to support submenus with an indicator for sub menu like an down arrow or + sign.
To do that, you have to change the side-nav markup and add some css and js.
New markup (the sub ul must be added ass li child and not ul.side-nav child) :
<ul class="side-nav">
<li>Link 1
<ul> <!-- added ul inside of li -->
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
JS
$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
$(this).children('ul').slideToggle(); //toggle submenu
});
CSS
.hasChildren:before{
content: "+";
float: left;
}
.hasChildren.active:before{
content: "-";
}
http://codepen.io/mouhammed/pen/vcnCb
I was having this same problem, and came across a new solution.
Foundation now has a generic drop down component so that you can add drop down functionality to any element.
So what I did was create the regular side nav, and then add dropdowns to each item. Dropdowns can be customized to dropdown in directions other than just down, like up, left, and yes even to the right. It is also possible to make it appear on hover.
<ul class='side-nav'>
<li>
Menu Item 1
<ul id="dropdownid1" class="f-dropdown" data-dropdown-content>
<li>
Sub Menu 1-1
Sub Menu 1-2
Sub Menu 1-3
</li>
</ul>
</li>
</ul>
so by setting the data-options in the initial a element to "align:right", it will dropright instead of dropdown. you can also set "is_hover:true" for hover mode
to use both use a semicolon in between.
the data-dropdown value in the a element must match the id of the ul element, and i believe the ul can be placed anywhere else you want, though i like to keep it under the element it is dropping down from.
for more info checkout the foundation docs
http://foundation.zurb.com/docs/components/dropdown.html#
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
ul.ipro_menu a.active-parent {
color: #FF0000;
}
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.
I've got some HTML:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
This is styled as a horizontal menu. The number of links in my list are such that the nav needs to drop down to two lines. But I don't want it to drop at a place mid-li. Which is to say that because my links are multi-word, it tends to drop in the middle of an item. Any way to do this that forces the next line to always be at a place in-between the <li> elements?
just add the css white-space:nowrap; to the li's
Persumably you could try replacing the spaces in your li-items with non-breaking-spaces, like so:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
nav li {display:block; float:left; white-space:pre;}
See the interface here:
http://jsfiddle.net/3h9Kw/
Is it possible to make a vertical <ul> that displays the text on the left side of the list?
The only example I can think of would be something like the Facebook timeline where you would have list items on the right side like normal and then list items on the left that have the list items. How would I do a list like the list items on the left? (I understand that this isn't how the timeline is coded, but it's just the only visual example I could think of).
Yes...use CSS:
<style>
ul {direction: rtl;}
</style>
If you'd like to alternate left and right, you can put it into a class:
<style>
.bulletonleft { direction:ltr; }
.bulletonright { direction:rtl; }
</style>
<ul>
<li class="bulletonleft">Element 1</li>
<li class="bulletonright">Element 2</li>
<li class="bulletonleft">Element 3</li>
<li class="bulletonright">Element 4</li>
<li class="bulletonleft">Element 5</li>
<li class="bulletonright">Element 6</li>
</ul>