I have shifts in my NAV menu that I am having trouble resolving. The menu is CSS & HTML based. Issue 1 > Mousing over Headings 1 through 4 causes a slight shift to the right of any headers to the right. How do I stop that? Issue 2 > Mousing over Header4 reveals a sub menu that initially appears fine. But when you hover over the sub menu the item of focus gets larger than the other sub menu items, so it looks sloppy. How do I correct this? Issue 3 > The Setting menu's sub menu (last menu item) expands in width when the sub menu is hovered over. I'd like it to be the same width whether it is being hovered over or not. How? Perhaps the same answer as #2.
Lastly, a general observation I'd like some feedback on. My original CSS for this NAV seemed pretty straight forward to me. As I've observed things that need to be "adjusted" I've added a tweak here, another there, and still another there, until now it seems completely convoluted. Is this common, or am I just mucking things up with bad tweaks? Thanks for your help.
CSS:
/* NAVIGATION */
#menu{
padding 0;
margin: 0;
}
.nav{
margin: 0;
padding: 0;
}
.nav ul{
padding: 0;
background-color: #003366;
}
.nav ul li{
display: inline-block; /*added*/
padding: 10px 22px 10px;
border-right: 1px solid #dadada;
position: relative;
background-color: #003366;
}
.nav ul li:hover{
background-color: #336699;
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
}
.nav ul li:hover ul{
display: block;
position: absolute;
}
.nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul{
display: none;
left: 0px;
/*width: 403px;*/
margin-top: 10px;
padding-top: 0px;
box-shadow: 0px 1px 1px rgba(85, 85, 85, 0.75);
border-top: 1px solid #dadada;
}
.nav ul li ul li{
width: 143px;
border-bottom: 1px solid #dadada;
background-color: #336699;
}
.nav ul li ul li:hover{
background-color: #FFF8DC;
left: 0px;
}
.nav ul li ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul li:hover a{
color: #000;
}
#settings {
padding: 6px 22px;
/*vertical-align:middle;*/
float:right;
border-right:none;
}
#settings:hover {
padding: 6px 18px;
}
#settings > ul {
position: absolute;
left: -124px;
top: 27px;
}
Web Page:
<?php
$access = 0
?>
<html>
<head>
<title>Nav</title>
<link rel="stylesheet" href="basicnav2.css"/>
</head>
<body>
<div id="menu">
<nav class="nav">
<ul>
<li>
Heading1
</li>
<li>
Heading2
</li>
<li>
Heading3
</li>
<li>
Heading4
<ul>
<li>
Item 1
</li>
<li>
Item 2
<li>
</ul>
<li>
Heading5
</li>
<?php
if ($access < 2)
{ ?>
<li id="settings">
<img src="images/settings.png" alt="Settings" height="25" width="25">
<ul id ="settings ul">
<li>
Logout
</li>
</ul>
</li>
<?php
} ?>
</ul>
</nav>
</div>
<div id="textarea">
<p>This is sample text.</p>
</div>
</body>
</html>
What is the reason for this part of your code:
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
Removing it appears to fix the problem at my end.
Issue1:
The expansion of li elements is caused due to addition of
left: -4px;
in .nav ul li:hover css section
However, removing it is causing little space on left of each li.
Issue 2 solution is removing the padding in the same above css section :
padding: 10px 22px 10px 26px;
Instead just use below line to jump to sub-menu:
padding-bottom: 10px;
Demo : http://jsfiddle.net/pdfn0auw/2/
Edit : new demo included
Related
Hi Please help me on this issue.
Issue: dropdown values of the menu is shown in other menu (it is not in-line with menu).
Example: Dropdown values of Home menu is Home-1, Home-2, Home-3 and it will shown under National parties menu. How can I show appropriately under the right menu
Demo: http://jsfiddle.net/shrikanth/Sv79m/
<div id="menu">
<ul>
< li>Home<ul>
<li>Home-1</li>
<li>Home-2</li>
<li>Home-3</li>
</ul></li>
<li ><a href="aboutus.html">National Parties<ul>
<li>BJP</li>
<li>Congress</li>
<li>CPM</li>
</ul></a></li>
<li><a href="services.html">Services<ul>
<li>TV</li>
<li>Cell</li>
<li>Radio</li>
</ul></a></li>
<li>Contact Us
<ul>
<li>India</li>
<li>USA</li>
<li>SAUS</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 1px 2px 1px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu ul li a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
#menu ul li ul{
display:none;
position:absolute;
top:31px;
background-color:red;
}
#menu ul li:hover ul{
display:inline-block;
height:auto;
width:135px;
}
#menu ul li ul:before{
content: '';
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 37%;
margin-left:10px;
}
http://jsfiddle.net/Sv79m/1/
Give #menu li a position of relative:
#menu li {
display: inline;
padding: 20px;
position:relative;
}
Adjust a little the absolute positioning with left:0 :
#menu ul li ul{
display:none;
position:absolute;
top:51px;
background-color:red;
left:0;
}
Edit:
Also, to solve the overlapping links, add this:
#menu ul li ul li{
display:block;
padding:5px;
}
http://jsfiddle.net/Sv79m/2/
Also, you had some unclosed tags, I closed them and now it's much better:
http://jsfiddle.net/Sv79m/3/
<a href="aboutus.html">National Parties<ul>
^^CLOSE ME!
It's all down to the positioning of the containing element. If you use position: relative; it allows you to position elements absolutely inside of it.
Here's a tutorial on creating a dropdown navigation, it explains about the positioning and structure. This should help - CSS 3 navigation menu
When I put in a margin it adds 5px to the right as I expect it too, but it creates problems with my box-shadow. I want the box-shadow to be able to cover that space (white space) created by the margins. Is there a work around for that? Obviously if you don't have any margins the box-shadow looks fantastic.
Here is my CSS
#horizontalNav{
margin: 0;
padding: 0;
}
#horizontalNav ul{
margin: 0;
padding: 0;
box-shadow: 5px 5px 10px #888888;
}
#horizontalNav ul li{
margin-right: 5px; /* Make this margin a 0 to see what it looks like without margin added */
padding: 0;
list-style: none;
position: relative;
float: left;
background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));
}
#horizontalNav ul li a{
text-align: center;
width: 150px;
height: 30px;
display: block;
color: white;
border: 1px solid black;
text-decoration: none;
text-shadow: 1px 1px 1px black;
}
#horizontalNav ul ul{
position: absolute;
visibility: hidden;
top: 32px;
}
#horizontalNav ul li:hover ul{
visibility: visible;
}
#horizontalNav ul li:hover{
background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));
}
#horizontalNav ul li:hover ul li a:hover{
background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
}
#horizontalNav ul li a:hover{
color: black;
}
#horizontalNav ul li ul li a:hover{
color: #120801;
}
Here is my HTML
<div id="wrapper">
<div id="horizontalNav">
<ul>
<li>Home
<ul>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
</ul>
</li>
</ul>
</div>
</div>
If you don't want the box shadow on the ul, then try putting the box-shadow on another element. The actual link seems to achieve what you want, but then grabs the top level link, so you might need to target even more specifically.
#horizontalNav ul ul a {
box-shadow: 5px 5px 10px #888888;
}
Actually... that's not the best element to add it too. Here is a stripped down fiddle with a complete answer. I also urge you to see how giving the right elements classes, (the fist ul) it makes things much more readable.
jsFiddle
why you are adding margin-right to 5px it seems worthless. For space you should add padding-right to 5px;
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
I have a menu created for my website in which I have second level menu aswell but the problem is that the second level menu has some problems:
It's size is bigger
It's menu items are floating right
It's going into another first level menu item's territory
I want to solve these problems but I am not able to do it on my own.
HTML:
<header>
<div class="welcome_area">
<p>Welcome, <b>Arkam Gadet</b>
</p>
</div>
<div class="menu">
<nav>
<ul style="z-index: 20;">
<li> My Profile
<ul style="display: none; background-color: #eee; box-shadow: 0px 0px 2px 3px #bbb; z-index: 1;">
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: 0;
}
.menu nav > ul li > ul li {
display: block;
}
Demonstration.
As you can see in the fiddle the items are floating towards right in the second level menu, I want them to
Float left the second level menu items
Shorten the second level menu's width
Send them back of the navbar.
Prevent it from going into another first level menu item's place.
Here are my responses to your issues and a corresponding Fiddle.
1) Float left the second level menu items
Removed padding.
.menu nav ul { padding:0px; }
Also repositioned drop-downs (tweak this as neccessary):
.menu nav > ul ul {
position: absolute;
left: 5px;
top:22px;
}
2) Shorten the second level menu's width
Was this satisfied by #1?
3) Send them back of the navbar.
Added position and z-index.
.menu nav ul li a {
position:relative;
padding: 2px;
z-index:5;
}
This positions the drop-downs behind the main <a>s.
However, if you want the drop-downs to come from behind the actual menu bar (gray bar), you'll need to restructure things.
4) Prevent it from going into another first level menu item's place.
I'm not sure what this means. Possible to clarify?
Add this to your css
.menu nav ul li ul {
padding:0px;
margin-left:45px;
}
Demo
I have a menu which has a submenu. the submenu appears when i hover the main menu, but as soon as i try to go down to the submenu it disappears most of the time. Only if i'm very fast I'm able to get to it before it disappears.
HTML:
<header>
<div class="wrapper">
<img src="images/logo.png" width="125" height="20" alt="">
<nav class="fl">
<ul >
<li> Target Groups
<ul>
<li>Manage Target Groups</li>
<li>Create Target Group</li>
</ul>
</li>
<li>Activity</li>
<li>Reports</li>
<li>Settings</li>
<li>Admin</li>
</ul>
</nav>
</div>
<!-- end .wrapper -->
</header>
CSS:
header{
margin-top: 30px;
background: url(../images/header-bg.png) no-repeat;
width: 942px;
height: 76px;
padding: 27px 25px 5px;
}
header .wrapper{
border-bottom: 1px solid #e5e5e5;
float:left;
width: 862px;
padding: 0 40px 5px;
position:relative;
}
header nav{
margin-left: 45px;
}
header nav ul{
z-index: 100;
}
header nav ul li{
display: inline;
margin-right: 35px;
line-height: 20px;
z-index: 100;
}
header nav ul li ul{
display: none;
position:absolute;
width: 962px;
left: 0;
top: 40px;
}
header nav ul li ul li{
float: left;
}
header nav ul li:hover ul{
display:block;
}
header nav ul li a{
font-size:16px;
color: #5b666a;
text-decoration: none;
padding: 5px 10px;
}
header nav ul li a.selected,header nav ul li a:hover{
background: #657073;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
I'm really stuck, please help...
In order to achieve what you want, it's better to use padding-top for your submenu, instead of absolute positioning (with the latter you'll end up with 'empty' space between menu and submenu, causing mouseout):
http://jsfiddle.net/BAzx7/
EDIT: And I added position:relative; to ul li, and a lower z-index to ul li ul, otherwise the submenu would be over the main menu - and disable it...
http://jsfiddle.net/BAzx7/1/
I've also fixed this with hoverIntent on one of my drop downs. Was an exclusive IE bug at the time but was a easy fix.
http://cherne.net/brian/resources/jquery.hoverIntent.html
This is how my function looked.
$('.main-nav > ul > li').hoverIntent({
timeout: 300,
over: function () {
$(this).addClass('hover')
},
timeout: 300,
out: function () {
$(this).removeClass('hover')
}
});
My markup was in the same structure as the son of sucker fish menu.