I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.
Related
I am making a website for a friend and am struggling with the CSS for the menu bar. I've deisgned it as he asked etc., but am having a couple of problems.
1) I can't get it to stretch across the full width of the page. The menu itself should stretch across the whole width of the page, with the width of the page split into 6, and the text in each menu item to be centralised and stay the same size and just add extra black background to accommodate the page width. (Most users who'll be looking at it will be using 1920 x 1080 apparently)
Like so (Ignore the boxes at the top - they were just colour tests):
http://i58.tinypic.com/1z2zkf8.png
2) When I mouseover the menuitems for the submenu, the main menu readjusts itself. How can I stop it doing this, so it stays at a static width for the menu buttons? (i.e. 1/6th of the page width)
3) How can I make it so clicking the main menu will show the relevant submenu and keep it up until there is a click elsewhere on the page (i.e. so you don't have to hold your mouseover to select the submenu)
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<link href="navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Clan
<ul class="subnav">
<li>Really? You made a website for this?</li>
<li>Member Roster</li>
<li>One of us...</li>
</ul>
</li>
<li>Games
<ul class="subnav">
<li>Current Games Rotation</li>
<li>Games You Really Need To Buy</li>
<li>Clan Steam Account</li>
<li>Wargame Decks</li>
<li>Leon's Wheel o' Games</li>
</ul>
</li>
<li>Events
<ul class="subnav">
<li>Thursday Game Night</li>
<li>ILAN</li>
</ul>
</li>
<li>Donate
<ul class="subnav">
<li>Help Us Not Be Poor</li>
<li>Help Us Even If You're Poor</li>
</ul>
</li>
<li>Other Shit
<ul class="subnav">
<li>Links to Shit</li>
<li>Cheap as Shit Games</li>
<li>Stats 'n' Shit</li>
<li>Downloadable Shit</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url("AEnigma_Scrawl/stylesheet.css");
.navbar {
font-family: "AEnigma Scrawl";
font-size: 32px;
text-align: left;
height: 80px;
width: 100%;
font-weight: normal;
text-shadow: 1px 1px #000000;
}
.navbar ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
width: 100%;
}
.navbar ul li {
float: left;
}
.navbar ul li a {
text-decoration: none;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(bg_navbar.png);
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.navbar ul li a:hover , .navbar ul li a:active, .navbar ul li a:focus{
background-image: url(bg_navbar_hover.png);
}
.navbar ul li a.current {
background-image: url(bg_navbar_current.png);
}
.navbar ul li .subnav {
display: none;
}
.navbar ul li .subnav li {
float: none;
}
.navbar ul li .subnav li a {
font-size: 18px;
}
.navbar ul li:hover ul.subnav {
display: block;
position: static;
}
.navbar ul li:hover ul.subnav a {
display: block;
width: 100%;
}
The reason why your menubar isn't stretching across the page is probably because browsers usually automatically add a margin to the html/body. Try setting this css:
html,
body
{
margin:0;
padding:0;
}
Also the reason why your menu bar is shifting is because you're positioning the .subnav ul as static when it should be positioned as absolute. Like so:
.navbar ul li .subnav
{
position:absolute;
}
Positioning an element as absolute means it takes up no space on page so this means it won't push other elements away.
Try adding min-width: 100% on the navbar.
Also change the menu background from image to color.
I have a code like this. But the background, that changes, doesn't touches the left border of the div. How can I do this without changing the position of the text ('Element 1')?
CSS:
li{
list-style-type: none;
}
li:hover{
background: green;
}
HTML:
<div style="border: 1px solid black; width: 200px;">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
http://jsfiddle.net/F698P/
Set padding of ul to 0px.
<style>
ul {
padding: 0;
}
li {
list-style-type: none;
padding-left: 65px;
}
li:hover {
background: green;
}
</style>
By removing the margin of the li and adding some padding to it.
li{
list-style-type: none;
margin-left: 0; /* assuming it had 10px margin first */
padding-left: 10px; /* more padding */
}
li:hover{
background: green;
}
The only thing that was not allowing it to have background color at the left side was the extra margin. You can also check for the ul properties for padding too. It is just an extra spacing.
ul was the problem
Ul was also having margin as I said,
so here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/F698P/1/
The CSS added was
ul {
padding: 0;
}
You can add more padding for the li element to make the text go back to where it had to go.
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}
This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
I have created a navigation bar that is centered with CSS which works. Each li item is separated with a border which is a background image. When hovering on the nav items, the separator disappears because the hover changes the background (I guess) but I wonder how I can fix this, padding or margin can't work because it will just shift the li element.
Second problem is that the sub menu items aren't displaying correctly and I have no idea why...
Demonstration: http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/
The code: http://jsfiddle.net/Xenios/tfbhh/9/
I'm trying to get this to work for almost a week, and I'm quite tired of it, so I'm looking here for support.
Separator
As you know the main bar (nav_container) has a background image, which makes up the look of the button. The background for each button is the separator and nothing else (10px on the right). So, when your on hover background shows, because its park of the non-hover background.
In order to fix this you need to put the separator in it's own <li>, with the non-hover background. Then when you hover the elements they can easily change to your current on hover image with.
If you don't want to separate the <li> elements then, you will have to will have to make individual full width images for each button, but looking at the way you've gone about making this menu, I doubt you will want to do this.
Here is your working example (I only did the first few buttons): http://jsfiddle.net/tfbhh/43/
Submenu
As I mentioned above, you have set the container background image, you haven't done this on your submenu items, so thats why they don't have a larger looking button. Use your developer toolbar (F12) to see the styling and this should clear it up.
You can use a left padding equal to the width of the separator on the li and change only the background on the a. Also I noticed you used class="separator" on all but the first list item. You could replace that with the :first-child pseudo selector. Then you would get something like this:
li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }
Edit: The CSS above covers the core styling of this solution. Here's a working example (using background colors):
http://jsfiddle.net/haa5X/3/
The complete CSS:
ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Edit 2: Sorry, missed the part of the submenu:
http://jsfiddle.net/haa5X/4/
The complete CSS:
ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }
li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>First sub item</li>
<li>Sub item 2</li>
<li>Last sub item</li>
</ul>
</li>
<li>Item 3</li>
</ul>