This is my HTML Code for menu
<div style="visibility:visible; color: #FFF; top:125px; width:100%; height:40px; position:absolute; display:block;background:#2B63B3;">
<ul id="trans-nav">
<li>Home</li>
<li>About us</li>
<li>Academic
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
<li> Sub Menu 3 </li>
</ul>
</li>
<li>Administration</li>
<li>Miscellanous
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
</ul>
</li>
</ul>
</div>
This the CSS code for menu
#trans-nav { list-style-type: none; height: 40px; padding: 0px 15px; margin: 0px; }
#trans-nav li { float: left; width:110px; position: relative; padding: 0px; line-height: 40px; background: #2B63B3; text-align:center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #97B7E6; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #2B63B3; list-style-type: none; padding: 0; margin: 0; z-index:1;}
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2B63B3; }
#trans-nav li ul li a:hover { background: #2B63B3; }
When I hover on any menu item color gets changed and when I click on item it navigates to the page but the the color of the text revert back to white. I want to keep the changed color till any other menu item is not clicked.
Any advice, suggestion or guidance is appreciable.
Thanking you all in advance
You can add a '.current' class to the anchor tag, via javascript. And give it those styles.
(Or if your nav is seperate on all pages just add it to the current pages nav, no need for js.)
Related
I need the submenu to show when hovering over the corresponding navigation element on the navigation bar. For the second level navigation list, I set display to none as follows
nav ul ul {
position:absolute; top: 100%;
background-color: #2b0306;
display: none;
}
and set the the first navigation list to display as inline-block as follows:
nav ul li a {
display: inline-block;
color: #fff;
padding: 10px 20px;
text-decoration: none;
width: 250px;
position: relative;
}
nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #6d0911; }
nav ul ul { position:absolute; top: 100%; background-color: #2b0306; display: none; }
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }
As for the nav position, I set it to absolute:
nav {
background-color: rbga(0,0,0,.65);
position: absolute;
top: 0px; left: 0px;
padding: 50px 0 0 0;
width: 100%;
}
nav::after { content: ' '; display: block; clear: both; }
nav ul { list-style: none; margin: 0; padding: 0px; }
nav ul li: hover { background-color: #2b0306; }
nav ul li: hover > ul { display: block; }
/* top-level */
nav > ul { padding-left: 300px; }
nav > ul > li { float: left; }
nav > ul > li > a {
width: auto;
padding: 10px 20px 15px 20px;
}
And this is the HTML code:
<nav>
<ul><!--first level navigation-->
<li><a title="About Us" href="aboutATMC.php" >About Us</a></li>
<li>
<a title="Services" href="#" aria-haspopup ="true">Services</a>
<ul><!--Second level navigation-->
<li><a title="Consultancy" href="#">Consultancy</a></li>
<li>
<a title="Learning & Development Solutions" href="#" aria-haspopup ="true">Learning & Development Solutions</a>
<ul><!--Third level navigation-->
<li><a title="Training & Coaching" href="#">Training & Coaching</a></li>
<li><a title="Learning Material" href="#">Learning Material</a></li>
</ul><!--End of third level-->
</li>
</ul><!--end of second level-->
</li>
<li><a onclick="toggleNavPanel ('contact_panel')" id = "contactus" href="#" >Contact Us <span id="navarrow"> ▾</span></a></li>
</ul><!--End of first level-->
</nav>
Any advice please?
Try this:
/* top menu */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li a {
padding: 10px;
display: inline-block;
}
nav > ul > li {
display: inline-block;
}
/* sub menu */
nav > ul > li > ul {
display: none;
position: absolute;
background-color: #ccc;
}
nav ul li:hover {
background-color: #ccc;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li>
Menu A
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>
Menu B
</li>
</ul>
</nav>
Here I added some HTML code
<nav>
<ul>
<li>
<a href='#'>Test</a>
<ul id='submenu'>
<li>Submenu Test</li>
<li>Submenu Test</li>
<li>Submenu Test</li>
</ul>
</li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</nav>
<style>
nav {
background-color: rbga(0,0,0,.65);
position: absolute;
top: 0px; left: 0px;
padding: 50px 0 0 0;
width: 100%;
}
nav ul ul {
position:absolute;
top: 100%;
background-color: #2b0306;
display: none;
}
nav ul li:hover > #submenu {
display: block;
}
nav ul li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
width: 250px;
position: relative;
}
</style>
If you ever see the box appears as you hover, great!
I'm creating a web with a vertical navigation menu on the left. In this menu, I have several submenus which I would like to be expanded to the right when the mouse hovers the parent item.
Here is the html
<div id="leftmenu">
<ul>
<li>Item</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItme</li>
<li>SubItem</li>
</ul>
</li>
<li>item</li>
<li>Item</li>
</ul>
</div>
And here is my CSS
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
}
#leftmenu ul li:hover > ul {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 100%;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
My problem is when I hover the mouse to an item that has subitems, the subitems appear but it down not in the same line as its parent item. Instead, it appears in the same line of the item the item I'm hovering. I'm learning CSS so I don't want to use any JavaScript in this case.
Please help me with this.
Sorry if I format something wrong since this is my first post here.
Thank you
You must write the <ul> tags before the <a> tags. Since, the <ul> is later going to be positioned as absolute, it is not going to affect the position of <a> tag...
I've edited the css a little bit to make it better, (hope you don't mind):
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
list-style: none;
padding: 10px;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
position: absolute;
top: 0;
left: 100%;
}
#leftmenu ul li{
position: relative;
}
#leftmenu ul li:hover > ul {
display: block;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
This should do the trick.
When an absolutely positioned element is styled inside an element,
that has a position which is not 'static', the 'top', 'left', 'bottom'
and 'right' css properties are relative to the parent container.
So here's what I did:
I changed the position of <li> tags to 'relative' and the submenu
<ul> top value as 'top : 0px;'. That's it.
I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>FAQ</li>
<li class="active">About</li>
<li>Contact Us</li>
</ul>
</div>
CSS
/** HEADER */
#header-wrapper
{
overflow: none;
height: 100px;
margin-bottom: 20px;
background: rgba(0,0,0,0.70);
}
#header {
overflow: none;
}
/** LOGO */
#logo {
float: left;
width: 10px;
height: 100px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
}
#logo h1 a {
padding-left: 1px;
text-decoration: none;
font-size: 1.50em;
font-weight: 600;
font-family: 'Archivo Narrow', sans-serif;
color: #FFFFFF
}
/** MENU */
#menu {
float: right;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
height: 100px;
padding: 0px 30px;
line-height: 100px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
background: rgba(0,0,0,0.70);
}
#menu .active
{
background: rgba(0,0,0,0.70);
}
Working menu:
a quick fiddle for you
//HTML
<div id="menu">
<ul>
<li>Home
</li>
<li>Services
<ul>
<li>Something You do
</li>
<li>TODO
</li>
</ul>
</li>
<li>FAQ
</li>
<li class="active">About
</li>
<li>Contact Us
</li>
</ul>
</div>
//CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}
Better to use jQuery plugin like Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="superfish.css">
// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
// initialise Superfish
<script>
jQuery(document).ready(function(){
jQuery('#menu ul').superfish();
});
</script>
Well, first add your submenu in the markup, for example:
<li>Services
<ul>
<li> sub menu item 1 </li>
<li> sub menu item 2 </li>
</ul>
</li>
....
Position your list items:
#menu li{
position: relative;
}
Style your sub menu:
#menu ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
#menu li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try http://jsfiddle.net/9LcfX/
I have a menu that has an image for its title, and changes images when it isn't hovered anymore. However, I want it to keep the same image while I'm hovering over the submenu that opens up beneath it, rather than revert back to its unhovered state. Can this be done with HTML/CSS?
Here's the CSS Code:
ul#nav {
margin: 0 0 0 0px;
}
ul.drop a {
display:block;
color: transparent;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 0px solid #fff;
background: transparent;
color: transparent
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
background: transparent;
}
ul.drop ul {
display:none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
background: transparent;
border: 0px solid #fff;
}
ul.drop:hover ul {
display:block;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
And here's the HTML
<ul class='drop' id='nav' style='padding-bottom:8px;'>
<li><img alt='Share' border='0' onmouseout='this.src='normal.png'' onmouseover='this.src='hovered.png'' src='normal.png' style='padding:0px; margin:0px;'/>
<ul>
<li style='background-color:#202020;width:160px;padding:0px; margin:0px;'>
<!-- Share Buttons -->
</li>
</ul>
</li>
</ul>
Mmm.. i have a special trick for you, i hope you like it. I make HTML like this :
<ul id="nav" class="drop">
<li class="icon1">HOVER ME
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
<li class="icon1">HOVER ME 2
<ul>
<li> HIDDEN MENU </li>
</ul>
</li>
</ul>
and special css trick like this:
...
ul.drop li.icon1{
background: url(YOUR_IMAGE) no-repeat left top;
width: 140px;
}
ul.drop li.icon1:hover{
background: url(YOUR_IMAGE_HOVER) no-repeat left top;
}
...
Here the demo : http://jsfiddle.net/CsV7a/
I'm making a simple drop down menu that I'm using JavaScript to show and hide. The menu shows, and the links work still, but when I hover past the first link to drop down, the whole drop down menu goes away, even though I set a specific height for it. I also have a separate div with content below it, and the text in that div gets pushed out of the way, though I thought z-index would fix that.
function showDrop() {
document.getElementById("dropdown").style.visibility = "visible";
}
function hideDrop() {
document.getElementById("dropdown").style.visibility = "hidden";
}
#nav {
/* margin-left: 550px;
padding-top: 110px; */
font-family: 'Averia Serif Libre', cursive;
font-size: 24px;
position: relative;
}
#nav ul li {
display: block;
float: left;
margin-right: 10px;
}
#nav ul li a:link,
#nav ul li a:visited {
text-decoration: none;
float: left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #00B2EE;
}
#nav ul li ul {
visibility: hidden;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
clear: both;
z-index: 2;
padding-top: 2px;
}
#nav ul li ul li {
width: 100px;
z-index: inherit;
background-color: #AAA;
font-size: 16px;
line-height: 22px;
}
<div id="nav">
<ul>
<li>About</li>
<li>Portfolio
<ul id="dropdown" onMouseOut="hideDrop();">
<li>Print Design</li>
<li>Web Design</li>
<li>Illustration</li>
</ul>
</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
Use the onmouseleave event instead, because onmouseout considers the mouse to be 'out' even if you're hovering children of the element. Sample code:
$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
hideDrop();
});
Hope that helped.