HTML/CSS: Keep Hovered Image in Menu Title While Hovered Over Submenu - css

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=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' 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/

Related

Adding Submenu to Existing Nav

I've been working on a navigation bar. I've got it styled the way I like, but for some reason am having issues getting submenus to work.
The code looks like:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8">Home</li>
<li class="page_item page-item-10 page_item_has_children">About
<ul class="children">
<li class="page_item page-item-22 page_item_has_children">Once More
<ul class="children">
<li class="page_item page-item-23 page_item_has_children">Another Sub Page
<ul class="children">
<li class="page_item page-item-25">Final Link</li>
<li class="page_item page-item-24">Something Else</li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21">Another Page</li>
<li class="page_item page-item-20">Subpage</li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item">Shop</li>
<li class="page_item page-item-9">FAQ</li>
<li class="page_item page-item-11">Contact</li>
</ul>
</div>
</div>
</div>
The CSS looks like:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
#media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
#media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle (with submenus):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle (without submenus): https://jsfiddle.net/b0mj7gp4/
I've found a bunch of tutorials on how to do this, but they are all using a float on the li.
I did have a go at it...
I hid the dropdown: #nav li ul { display: none; }
Then I showed it on hover:
#nav li:hover > ul {
display: block;
position: absolute;
}
Which kind of works...but the links show to the left of the main navigation item, I'd like to just tweak this so the links are stacked and show centered under their corresponding header.
I feel like I'm close, can anyone point me in the right direction?
Thanks,
Josh
You can add display: flex to the li:hover ul, then make the flex-direction: column and make the non-hover event position: absolute, left: 0. This creates an issue with the ul child element floating to the far left. So to fix this issue, you need to style its parent to have a relative position. The following should do the trick.
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}
You haven't position: relative in li.
And, it would be better to use position: absolute without hover, in default.
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}

Extra padding under menu with child

hey guys I am having a few issues with my menu, theres a weird padding that pushes my menu to the right a few pixels but I managed to fix it on the main parents, originally they were both pushing out the same amount.
Pic
and heres a better view
I am running through my css and adding padding-left:0px;
Heres my code if anyone can assist me.
<div class="css_menu_two_line">
<ul class="two_line_menu">
<li>Menu 1</li><li>
Menu 2</li><li class="current">Menu 3 SHOW
<ul>
<li>Submenu 3-1</li>
<li>Submenu 3-2</li>
<li>Submenu 3-3</li>
<li>Submenu 3-4</li>
<li>Submenu 3-5</li>
</ul>
</li><li>Menu 4</li><li>Menu 5</li>
</ul>
</div>
css:
.css_menu_two_line {
width:100%;
overflow:hidden;
}
.two_line_menu {
padding-left: 0;
position: relative;
margin-bottom: 40px;
background:#77f url('img_bg.gif') repeat-x;
}
.two_line_menu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px;
}
.two_line_menu li:hover a {
color: #fff;
background: #aaf;
}
.current a {
color: #fff;
background: #aaf;
}
.two_line_menu li { display: inline-block; }
.two_line_menu li ul { display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px; }
.two_line_menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
}
.two_line_menu li ul li:hover a { color: #000; }
fiddle: http://jsfiddle.net/uf2cnakc/
You need to take away the padding from .two_line_menu li ul. To do this we can add the following style padding: 0;.
A lot of HTML elements have default styles, so beware of this.
Your CSS for this class should now look something like this:
.two_line_menu li ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
padding: 0; /* Just added */
}
Demo Here
Your CSS contained display:inline which has block child element and position absolute as well. Try this CSS property.
.two_line_menu li { display: block; float:left; }
.two_line_menu li ul{ position:absolute; left:0; padding:0; width:100%; background: #aaf; top:38px; }
.two_line_menu li ul li{ float:left;}

Horizontal Table needed centering

Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code

How can I keep CSS style select for menu item clicked

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.)

How to add drop down menu using CSS?

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/

Resources