This is my css code of menu bar which is having an error and not working fine.
ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 10px; /* large padding to get menu item to protrude upwards */
padding-bottom: 10px; /* large padding to get menu item to protrude downwards */
}
ul.semiopaquemenu li {
position: relative;
}
/*sub menu*/
ul.semiopaquemenu li ul.sub-menu {
display:none;
position: absolute;
LEFT:-22PX;
top:25px;
background-color:#99CCFF;
width:130px;
padding:10px;
border-left: 2px solid #4b6c9e;
border-right: 2px solid #4b6c9e;
border-bottom: 2px solid #4b6c9e;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
text-decoration:italic;
text-transform:uppercase;
}
ul.semiopaquemenu li:hover ul.sub-menu {
display:block;
}
</style>
This my Html code of menu Bar:
<ul class="semiopaquemenu">
<li><asp:LinkButton ID="lbFAQ" runat="server" PostBackUrl="~/FAQ.aspx">Department</asp:LinkButton>
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<br />
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<br />
<li>
Sub Menu 4
</li>
</ul>
</li>
</ul>
In this I'm not able to make boxes in sub menu items, so please help with this.
JSFiddle Demo
We are not clear what is actually required but what I understood is you need a box on sub menu item as well
try this JS fiddle
Add this Css
.sub-menu a{
border-bottom: 1px solid #000;
padding: 10px;
display: block;
}
Remove Extra Br in between <li> tags
Also Remove Margin padding form submenu <ul>
ul.semiopaquemenu li ul.sub-menu {
padding:0px;
margin:0px;
list-style:none;
}
change css class ul.semiopaquemenu li ul.sub-menu of attributes to border-bottom: 0px solid #4b6c9e;. The lines are appeared due to mention of px in 2px change it to 0px.
Related
I would like to create a vertical menu for a website. It works quite well but I still have a problem with the following code:
JSP:
<nav>
<ul>
<li> Saisie assistée (schémas prédéfinis) </li>
<li> Saisie libre </li>
<li> Extourne ou annulation écriture
<ul ">
<li> Annulation écriture jour validé</li>
<li> Extourne écriture antérieure </li>
</ul>
</li>
<li> Consultations/Editions
<ul >
<li> Lots à valider</li>
<li> Lots antérieurs comptabilisés </li>
<li> Listes des schémas habilités </li>
<li> Listes des comptes habilités </li>
</ul>
</li>
<li> Paramètrage/Administration
<ul >
<li> Entités habilitées</li>
<li> Collaborateurs habilités </li>
<li> Habilitations Entité / Comptes </li>
<li> Habilitations Entité / Schémas </li>
<li> Paramétrages Schémas </li>
<li> Import et Export Excel </li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
width:300px;
}
nav ul {
list-style:none;
margin:0;
padding:0;
}
nav ul li {
position:relative;
background-color: #d23070;
border: 1px solid;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
margin-bottom: 5px;
}
nav ul li:hover,
nav ul li:FOCUS {
position:relative;
background-color: #3968ab;
border: 1px solid;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
margin-bottom: 5px;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
display:block;
text-decoration:none;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:HOVER,
nav a:FOCUS {
background-color:#3968ab;
color:#ffffff;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
nav ul li ul{
background-color:#3968ab;
color:blanc;
border: 1px solid;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
nav a:focus ~ ul{
display:block;
border: 1px solid;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background:#f1f1f1;
padding-top: 10px;
}
nav ul li ul:hover {
display:block;
border: 1px solid;
border-top-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background:#f1f1f1;
padding-top: 10px;
}
nav ul ul {
position:relative;
left:0px;
top:0px;
border-top:1px solid #e9e9e9;
display:none;
}
nav ul ul li {
width:296px;
background:#f1f1f1;
border:0.5px solid #e9e9e9;
border-top:0;
}
nav ul ul li a {
color:#3968ab;
font-size:12px;
text-transform:none;
}
nav ul ul li a:hover {
color:#ffffff;
}
What I want is to open the menu on click and then keep it open, even if we select an element on the list of the subMenu. For now, it remains open if I select an item of the menu's list, but it doesn't if I click on an item of the submenu's list and move my mouse out of it.
This is what I whant when the item of the submenu "Extourne écriture antérieur" is selected(focus).
But When the submenu isn't hover, it is closing by itself. (So I have to keep my mouse on it to keep it open). How can I keep it open even if it is not hovered?
EDIT:
I insist for keeping open the submenu with the item selected when it is not hover by mouse. This is the real problem for me...
To do this, I believe you would need some javascript.
First you would create a style in your CSS that could be added to a child ul to keep it open.
ul.open {
display: block;
}
Then using some jQuery, you listen for a click on an item, and when you detect a click, you find the LI's inner UL and apply the 'open' class to it.
$(document).ready(function(){
$("nav > ul > li a").click(function(){
var parentLi = $(this).parent('li');
var childUl = parentLi.children('ul');
if (childUl.hasClass('open')) {
parentLi.childred('ul').removeClass('open');
} else {
parentLi.childred('ul').addClass('open');
}
return false;
});
});
you can try this one:
First You Create id="top_navigation" in nav
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
},
function() {
$('ul', this).slideUp('fast');
}
);
});
DEMO HERE
This Should work....
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
I am trying to move the starting text in my nav menu more to the left and make the rest align up correctly in-between the gaps also i have noticed this dose not work on touch devices like the iPhone. I believe this is possible via the CSS sheet without having to use JavaScript.
Any help would be much appreciated
Many thanks
http://jsfiddle.net/p6Bj5/
HTML
<div class="navbar">
<ul id="nav">
<li>
Homepage
</li>
<li><a heref="#">About Us</a>
<ul>
<li>About</li>
<li>Allies</li>
<li>Rank</li>
</ul>
</li>
<li>
Members
</li>
<li>
Forums
</li>
<li><a heref="#">Stats</a>
<ul>
<li>In-Game Stats</li>
<li>Outfit Stats</li>
</ul>
</li>
<li><a heref="#">Media</a>
<ul>
<li>Downloads</li>
<li>Gallery</li>
<li>Videos</li>
<li>Live Streams</li>
</ul>
</li>
<li>
Events
</li>
</ul>
</div>
CSS
#charset "utf-8";
body {
font: 80%/1.4 Arial, Helvetica, sans-serif;
background-color:#000;
margin: 0;
padding: 0;
}
.navbar {
background-image:url(http://gbprojects.net/images/top_06.jpg);
width: 937px;
height: 48px;
line-height: 48px;
margin: 0 auto;
}
#nav{
list-style:none;
font-weight:normal;
margin: 0px;
line-height: 38px;
/* Clear floats */
float:left;
width:100%;
height: 38px;
font-size: 18px;
font-weight: bold;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
#nav a{
display:block;
padding:10px;
color:#fff;
background: transparent;
text-decoration:none;
text-shadow: black 0.1em 0.1em 0.2em;
}
#nav a:hover{
color:#000;
text-decoration:none;
text-shadow: none;
}
/*--- DROPDOWN ---*/
#nav ul{
background: #02949d; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
list-style:none;
position:absolute;
margin-top: -10px;
margin-left: -20px;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
line-height: 20px;
z-index: 100;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
-webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
-moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
}
#nav ul li{
margin-left: -40px;
margin-right: 50px;
font-size: 12px;
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
z-index: 100;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
z-index: 100;
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
z-index: 100;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: transparent;
color: #000;
text-decoration:none;
z-index: 100;
text-shadow: none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
z-index: 100;
margin-left: 20px;
text-shadow: none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background: transparent;
color: #fff;
z-index: 100;
margin-left: 20px;
text-shadow: none;
}
x;
line-height: 58px;
Your issue is that you are using a background image for the navigation bar. Because the words are different lengths you will need to go in and change the margins individually for each link. It is either that or add backgrounds to the ul and li which would have been the preferable method.
Try using like this.
.navbar {
background: url(http://gbprojects.net/images/top_06.jpg) 35px 0px no-repeat;
}
Don't give a huge margin to the elements for alignment.
Be specific to your background image for header because it seems no to be as perfect as should be.
You can keep it as plan background and put border-left or border-right properties to show a difference in between the list items. That is the good way of handling such cases. Hope it helps you.
I'm trying to have an inline-block navigation bar. When someone hovers over the li, I want it to change background colors - simple enough.
It appears as though my code causes the background to be off about 2 inches.
Here is the offending code -
css-
#mainNav {
width: 100%;
background:#bbb;
border-right: 2px solid #777;
border-left: 2px solid #777;
border-bottom: 2px solid #555;
}
#mainNav ul li {
display: inline-block;
line-height:40px;
font-size: 20px;
padding: 0 15px 0 15px;
border-right: 2px solid #777;
}
#mainNav ul li.active {
background:#aaa;
}
#mainNav ul li:hover {
background:#aaa;
}
html-
<div class='container_12'>
<nav id="mainNav">
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Forums</a></li>
</ul>
</nav>
</div>
Screenshot:
Give margin-left to li will solve the problem.
DEMO
It should also be :
#mainNav ul li:active {
background:#aaa;
}
Just like hover is coded out. Still not sure about the original question though.
I have implemented my webpage menu by inline "li"-s of "ul". "li" has a colored border and contains "a". Now on mouse hover I need to change color of the text inside "a" and move it 2px up by not moving the li border. How can I do that?
EDIT:
Here is my code:
HTML -->
<div id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div> <!-- end menu -->
CSSS -->
div#menu ul
{
list-style-type:none;
}
div#menu li
{
margin-left:2px;
display:inline-block;
border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;
}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}
You can do something like:
li:hover {
border-top: none;
}
# Note: this is different from 'li a:hover'!
li:hover a {
position: relative;
top: -2px;
}
Add bottom padding, subtract from line height:
div#menu li a:hover {
color:#95d9e4;
margin:0 6px 6px 6px;
line-height:18px;
padding-bottom:2px;
}