I am trying to recreate this nav menu in css - but I am having a hard time with getting bit rows to justify to each other correctly.
I'm not sure is formatting it as an li element is best - or should I try JS Buttons.
Any advice is appreciated.
I tried to put a picture up - but it doesn't look like a have enough reputation ponts - but just imagine all the buttons aligned justified.
I have a JS fiddle up here
<nav id="access" class="group" role="navigation">
<ul id="two">
<li>Home</li>
<li>About Us</li>
<li>PRODUCTS</li>
<li>EDUCATION</li>
<li>HISTORY</li>
<li>ALUMNI</li>
</ul>
<ul id="one">
<li>THE PHILLAPINES</li>
<li>INFORMATION</li>
<li>GERMANY</li>
<li>LONDON</li>
<li>Contact Us</li>
</ul>
</nav>
http://jsfiddle.net/mjkessel/jK26n/2/
For #access ul li add float: left; and for #one li and #two-li replace margin-right with margin-left and now try to combine. If you want to have all li with the same width set width for #access ul li
Related
I have a top navigation bar which I want to be always visible even when the screen is only 320px wide. Here is what I have done:
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
I display the list horizontally using this CSS:
nav li { float: left; }
nav li + li { margin-left: 30px; }
I end up with this:
Products Services Videos News Contact
This is fine until the screen becomes small and the final two list items get pushed down to the next row like this:
Products Services Videos
News Contact
I need to remove the left margin of the first item that is on a new row like this:
Products Services Videos
News Contact
How could this be achieved? I don't mind changing my HTML and CSS completely to achieve it - as long as it can be done!
Swap it and use margin-right instead
nav li { float: left; }
nav li:not(:last-child) { margin-right: 30px; }
nav { width: 250px; } /* just to show the effect of a line break */
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Another option, which can become useful, is adding equal margin on both sides of each item.
Then, if the layout allows it, one can give the parent an equal negative margin, or just leave it, and you'll end up with the same result, all left aligned when line breaks
nav li { float: left }
nav li { margin: 0 15px }
nav ~ nav { margin-left: -15px }
nav { width: 250px; } /* just to show the effect of a line break */
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<br><br><br>
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
You could simply apply a right margin instead of left margin. That way when items are broken into a new line, there will not be a space before them:
nav li { float: left; margin-right: 30px; }
<nav>
<ul>
<li>Products</li>
<li>Services</li>
<li>Videos</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
jsfiddle: https://jsfiddle.net/azizn/v1f9hL04/
When my nav collapses, the links take up the full width of the screen. How can I make it just the width of the text inside? I've tried targeting the ul and the li css with no luck and an not sure how to approach this. Any suggestions on what style would fix this?
<div class="collapse navbar-collapse pull-right" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About</li>
<li>Experience</li>
<li>Skills</li>
<li>Graphic</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div>
You could use something like this:
#nav-collapse > .nav > li {
display: inline-block;
}
There´s my code below, now I´m trying to know if there is some CSS property to inform users that there is a sub menu in my <li>test</li>. Is it possible?
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>test
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
</ul>
</li>
</ul>
</nav>
</section>
CSS:
#menu {width:960px; height:auto; margin:0 auto 0 auto;}
#menu ul {list-style-type:none;}
#menu ul li {float:left; height:46px;line-height:46px; font-weight:300;}
#menu ul li a {text-decoration:none;color:#ccc; display:block; margin-right:5px; height:46px; line-height:46px; padding:0 5px 0 5px;font-size:20px; }
Just for the record it is possible without JS:
What I did is to specify a styling for child ul-elements nested within an li.
The sub-ul is not visibility:hidden as in the previous example, the child elements are.
So here you go:
http://codepen.io/anon/pen/ufGdm
#Paulie_D I used your code as basic and just changed some parts.
There is no CSS property that detect a child element.
However it's simple enough to do with JQuery...in fact there are an number of ways with JQ
Here's one.
JQuery
(function($) {
$("nav > ul").addClass("top-level");
$(".top-level li:has(ul)").addClass("parent");
})(jQuery)
Codepen Demo
I am having a few issues with my css menu. I'm redesigning all my CSS menus and doing away with any javascript assistance. I'm sure it's something simple so please go easy on me.
First Issue: I am trying to connect a top border of an ul to the right border of an li.
I have tried adding a top-border to 'ul#nav ul' but it goes all the way across.
I have tried adding margin-bottom:-1px to 'ul#nav li:hover > a' to make it extend down to cover the top-border above but that doesn't work.
Second Issue: When the mouse is active in the slideout, I'm getting a weird space on the main li.
Final Issue: I've looked at several online tutorials to add a '>' graphic when there is a submenu but can't seem to get it integrated in the right places.
HERE IS LINK TO CODE: http://jsfiddle.net/Bqh9a/
Here is code:
<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;}
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>
<ul id="nav">
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
<li class="pipe">|</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>Our Goals</li>
<li>Our Team</li>
<li>Press
<ul>
<li>2006</li>
<li>2007</li>
<li>2008</li>
</ul>
</li>
<li>Impressum</li>
<li class="bottom_li"><span class="li_hover">See all</span></li>
</ul>
</li>
</ul>
Thanks so much for help in the right direction.
1st Issue:
One way to achieve this is to make the a links higher z-index (z-index:100 # Line 7), then give the ul menu a z-index of -1 and use 'top:23px' to pull the menu up underneath the .
But its a bit of a hack and if I were you I would avoid trying to do this
2nd Issue:
at line 7 of your CSS the :hover style is acting on all li's, even the ones that are nested, it would be much better for you to give the inner ul's their own classes, then you can apply more specific styles, at the moment the border-left is being applied to all li's that are beneath #nav
3rd Issue:
You can add another element () inside the li and float right, this could have a > image or just a > character.
I know you said you are removing javascript but it might be worth looking at jQuery UI Menu and looking at the CSS layout they use, (or just for pinching their icons)
I was wondering is it possible to display the links contained in the nav element with the id value of sub-menu when I hover over the link with the id of more-subs using just CSS? If so how?
<nav id="main">
<ul>
<li>More</li>
</ul>
</nav>
<nav id="sub-menu">
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</nav>
You cannot travel up the DOM in css - only down (thus cascading).
If you can't change your html markup you will have to use a javascript solution to make this work.
Otherwise if you can change your html do it like this: http://jsfiddle.net/JdZUx/15/ (edited code in case you want to have multiple dropdowns)
<nav id="main">
<ul>
<li>
More
<ul class="sub-menu">
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</nav>
#main .sub-menu {display:none;}
#main li:hover .sub-menu {display:block;width:200px;background:#ccc;}
Note: This is just basic code - if you want it to be crossbrowser compatible you will have to optimize and add some more rules. also :hover in IE6 is supported only on <a> element
check this tutorial, i think it will help you.
https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
try use something like:
#more-subs #sub-menu{
display: none;
}
#more-subs:hover #sub-menu{
display: block;
}
Is this helps you?