I have multiple menus (ul) and each have li's inside them. For example, the main navigation menu for the site is horizontal. But, I also have several other menus for products on a page, and those menus are vertical.
I don't want to go adding class="verticalMenuOption" to all of the menus that I want to be vertical, because that just makes things look ugly in the code, and ugliness is very distracting for me.
Is there a way to have 1 menu with horizontal li's, and every other menu on the site horizontal li's?
Horizontal:
<ul class="menu">
<li class="selected">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Help & Support</li>
<li>Contact Us</li>
<li class="selected">My Account</li>
</ul>
Vertical:
<ul class="menu">
<li class="selected">sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li class="selected">sample</li>
</ul>
I think you meant to say 1 horizontal, the others all vertical. But anyway, if vertical is the rule, and there's only one exception, style your ul to be vertical (which is default), and then make a single exception for the nav. If your nav has an id, you can use that as a css selector, like #nav, so you don't need to add a new css class.
make the default menu vertical (by accessing .menu class), and add a horizontal class to the one you want as horizontal + style it as horizontal.
Add an id to the menu you want to be horizontal
<ul id="horizontal" class="menu">
...
</ul>
<ul class="menu"> ... </ul>
then in your CSS file
#horizontal { display:inline }
usually each of those menus would be likely to have different ancestors, or parent divs.. maybe the horizontal one is in a div called "header" and the vertical content one in a div called "content" or "sidebar" - it doesn't matter if they're direct parents or not as long as they are unique in the ascendency
you can then target each list separately
#header .menu {.. your styles ..}
.content .menu {.. your styles ..}
There's not really enough code here to explain properly, but there is usually a way of isolating an element without having to add more classes, if not then as already mentioned you can do that or you can add in the wrapper divs with ID's
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
#vertical li {
display: block;
float: left;
padding-right: 15px;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="menu" id="horizontal">
<li class="selected">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Help & Support</li>
<li>Contact Us</li>
<li class="selected">My Account</li>
</ul>
<ul class="menu" id="vertical">
<li class="selected">sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li class="selected">sample</li>
</ul>
</body>
</html>
Related
"Every anchor link inside the navigation menu should have a font size of 1.5 rem. (Hint: Two elements!)"
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Chat</li>
</ul>
</nav>
would this work?
nav ul{font-size:1.5rem;}
This way only makes sense if the <ul> element is a direct child of the nav. Which in your case, works just fine.
nav > ul {
font-size:1.5rem;
}
If the <ul> was not a direct child to your <nav> then I would apply a class like so:
.font-size {
font-size: 2rem;
}
<nav>
<ul class="font-size">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Chat</li>
</ul>
</nav>
I have a simple header and nav bar in my page. I want to add username/password and Login button to the nav bar but I wasn't able to do it. Every time I add the code it is not in the nav bar, either below the bar or above the bar. Can anyone help?
Here is the JSfiddle link https://jsfiddle.net/ds7ezkn8/2/
<nav>
<ul>
<li>Home</li>
<li>Programming Languages
<ul>
<li>Which Language?</li>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>Python</li>
</ul>
</li>
<li>Join The Club</li>
<li>Calendar</li>
</ul>
</nav>
Thanks
In your code you have given 25% of each , because od which if you add new text field it won't wrap inside nav
I have updated the fiddle, please look into it
https://jsfiddle.net/ds7ezkn8/2/
I have reduced the width of li
nav li {
width: 20%;
float: left;
position: relative;
}
Is this your expectation?
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
I have 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:
Home About Us Location
Contact Visit Schedule
I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.
<div class="footer">
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<br>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.
HTML
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
CSS
#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }
Demo
Demo(with white-space fix)
Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:
li { display: inline-block; width: 100px; }
Check this:
<pre>
test
test
test
</pre>
Source: How do I create tab indenting in html
First, a <br/> is not a valid child element of <ul/>.
To apply a width to an <li/>, you will need to make it a block-level element.
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
and
#footerlinks {
background:#ccc;
overflow:hidden;
padding:5px;
width:300px;
}
#footerlinks li {
float:left;
padding:5px 0;
width:33%;
}
Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/