I have created a jfiddle for this problem at: JSFiddle showing menu problems
I am trying to create a cool menu using jquery and css3 mainly because of familiarity. I would be willing to switch to full CSS3, but I am less sure of how to do that. I have several problems that I cannot seem to fix. The code is as follows:
javascript:
(function ($) {
$.fn.hoverIntent = function (f, g) {
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? {
over: f,
out: g
} : f);
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function (ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function (ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
$(ob).unbind("mousemove", track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.over.apply(ob, [ev]);
} else {
// set previous coordinates for next time
pX = cX;
pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout(function () {
compare(ev, ob);
}, cfg.interval);
}
};
// A private function for delaying the mouseOut function
var delay = function (ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob, [ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function (e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while (p && p != this) {
try {
p = p.parentNode;
} catch (e) {
p = this;
}
}
if (p == this) {
return false;
}
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({}, e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
}
// else e.type == "onmouseover"
if (e.type == "mouseover") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX;
pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove", track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) {
ob.hoverIntent_t = setTimeout(function () {
compare(ev, ob);
}, cfg.interval);
}
// else e.type == "onmouseout"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove", track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) {
ob.hoverIntent_t = setTimeout(function () {
delay(ev, ob);
}, cfg.timeout);
}
}
};
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);
$(function () {
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
}
$("ul.dropdown li").hoverIntent(config);
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
$("ul.dropdown li ul li:has(ul)").find("span:first").append(" » ");
});
CSS3:
.main_nav {
background-color:#ffffff;
text-align:center;
float:left;
height:50px;
}
.main_nav ul{
list-style:outside none none !important;
text-align: center;
display: inline;
width: 80%;
}
/*
LEVEL ONE
*/
ul.dropdown { position: relative; white-space: nowrap;text-wrap: none;}
ul.dropdown li { font-weight: bold; float: left; background: #ffffff; color: #4b2c17; }
ul.dropdown a:hover { color: #ffffff; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
color: #222; }
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background: rgb(214, 210, 0); color: #ffffff; position: relative; }
ul.dropdown li.hover a { color: black; }
ul.dropdown li:hover h4 {background: #ffffff;color: #4b2c17;}
/*
LEVEL TWO
*/
ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; padding-left: 0px !important;}
ul.dropdown ul li { font-weight: normal; background: #ffffff; color: #4b2c17;
border-bottom: 1px solid #222; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
/*
LEVEL Four
*/
ul.dropdown ul ul ul { left: 100%; top: 0; }
ul.dropdown ul ul li:hover > ul { visibility: visible; }
and the HTML:
<div class="main_nav">
<ul class="dropdown">
<li>Home</li>
<li>User
<ul class="sub_menu">
<li class="subnavhead"><h3>New Users</h3></li>
<li>Add New User</li>
<li>Validate Users</li>
<li class="subnavhead"><h3>Current Users</h3></li>
<li>Edit User Information</li>
</ul>
</li>
<li class="topnav">Head 2
<ul class="sub_menu">
<li><a target="new" href="#">Subhead 1</a></li>
<li class="subnavhead"><h4><span>Section Group</span></h4>
<ul class="thirdnav">
<li>Subgroup head 1
<ul class="thirdnav">
<li>Subgroup item 1</li>
<li>Subgroup item 2</li>
</ul>
</li>
<li>Subgroup head 2
<ul class="thirdnav">
<li><span>Subgroup item head 1</span>
<ul class="thirdnav">
<li>third level 1</li>
<li>third level 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
These codes are supposed to generate a multi-level menu with the ability to track what is highlighted; however, there are several abberrant behaviors within this that I have been currently unable to fix.
The first is the width for the main navigation bar. I have been unable to get the menu to spread out to fill the menu bar even 80% regardless of the width parameter I have tried to define.
The second is the width of the LI on the drop-down menu components. As you can see I am able to prevent the line from wrapping, however as shown, the <li> does not stretch the width of the longest piece of text. Along with this, you see the highlight isn't consistent and I do not know why. I have tried multiple variations and no success.
The last problem is why that stupid >> is showing up on the last html link under sugroup head 2. The logic doesn't fit that, but it seems to show up.
Any help would be greatly appreciated!
Thanks!
Jon
If I understood correctly the issues I think I've resolved 2 and 3. About issue number 1 I simply don't understand what you mean... You want the whole menu to take up the whole page's width? If you could clarify it would be really helpful.
Anyway, for issue number 2 (again, if I understood it correctly) you can make the menu take up the width of the longest item by disabling the wrapping and setting the width to 100%:
ul.dropdown ul li {
font-weight: normal;
background: #ffffff;
color: #4b2c17;
border-bottom: 1px solid #222;
width: 100%;
white-space:nowrap;
}
For issue number 3, Prachit had it right. It's the :has jQuery selector combined with the .find that's giving you trouble, since the a tag for "third level 1" is the first descendent a tag of a li that matches your selector $("ul.dropdown li ul li:has(ul)").find(" a:first"). In this case you should be looking only for direct childs of the li that matches your selector, hence your line would turn into:
$("ul.dropdown li ul li:has(ul)").find("> a:first").append(" » ");
Anyway, I've updated your fiddle here: http://jsfiddle.net/tzn1x7uq/5/
Hope I could help.
The other answers appear to have the good solutions for issues 2 & 3. When using position:absolute the children's height and width do not adhere like they normally do. Using white-space: nowrap will correct that (although using width:100% won't make a difference).
This line:
$("ul.dropdown li ul li:has(ul)").find("> a:first").append(" » ");
Works fine, there's other ways to target this besides :has() but it works. You can correct the hover issue of "head 2" > "section group" by removing the background from the following rule:
ul.dropdown li:hover h4 {background: #ffffff;color: #4b2c17;}
Lastly is the issue of not being able to set the width. There's a few things that need to happen. For one be sure to set the width on the document:
html, body{
width: 100%;
}
Next you need to add the same to all parents (percentage width only works if the parent has a defined width as well). So start with .main_nav:
.main_nav {
width: 100%; //add
background-color:#ffffff;
text-align:center;
height:50px;
}
On of the biggest reasons you're having issues is because of .main_nav ul being set to display: inline. inline doesn't not respect it's children's width/height therefore calling width: 100% will have no effect on it. Change to inline-block or just block and now add your width:
.main_nav ul{
width: 100%; //add
list-style:outside none none !important;
text-align: center;
display: inline-block; //add
padding: 0; //clear the default padding set on ul elements
}
Next, Your list items are floating, you'll need to clear those. Typically overflow:hidden is a good approach for clearing floats but in this case you have subnavs that will "overflow" your content so you're better off using a clearfix:
.main_nav ul:after{
content: "";
display: block;
clear: both;
}
Now you can set the size on your li's:
ul.dropdown li { width:33%; font-weight: bold; float: left; background: #ffffff; color: #4b2c17; }
Since your styles are being inherited through shared targeting, you need to overwrite the previous width of 33% with width: 100% for your subnav lis:
ul.dropdown ul li { font-weight: normal; background: #ffffff; color: #4b2c17; border-bottom: 1px solid #222; float: none; width: 100%; //add }
Now your list will take the full width. You have other issues, for one, using visibility: hidden is not a great idea. While the element is "hidden" from sight, it still takes up room on the page (as you will see if you scroll right and there is a lot of excess space). There's also the fact that your "head 2" menu has so many subnavs and stretches so far to the right that it's not ideal to be tucked into the corner. You may want to revisit the way it displays. Perhaps have it just drop downwards instead of two the right. Also just a UI/UX tip, having so many levels of dropdowns is not well liked for a user. But that's going to be up to you. Structurally this could use a lot of work, you should take advantage of class names so you don't have children inheriting unwarranted styles but I hope this sets you on the right path:
FIDDLE
you can use it.
<style>
body {
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
/* background: #E3CAA1;*/
}
ul.dr_menu {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
/*-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);*/
}
ul.dr_menu li {
font: bold 12px/18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
/* background: #fff;*/
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul.dr_menu li:hover {
background: #0b86c8;
color: #fff;
}
ul.dr_menu li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul.dr_menu li ul li {
background: #0b86c8;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul.dr_menu li ul li:hover { background: #666; }
ul.dr_menu li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style>
<body>
<ul class="dr_menu">
<li>
Add Management
<ul>
<li>My Add</li>
</ul>
</li>
<li>
API Management
<ul>
<li>Create API</li>
<li>Manage API</li>
<li>Test API</li>
<li>Document API</li>
</ul>
</li>
</ul>
</body>
The width of main navigation bar does not spread because .main_nav have float: left;, so if you added width to li in percentage it won't spread. You can add width to .main_nav and then to li in percentage, it will spread along the width of .main_nav.
Set width of li on drop-down to get desired width drop-down. Not sure what you mean about highlight inconsistent, if you mean about extra white-spaces, it is because heading tags h3 and h4 have some default padding and margin. Set margin and padding to 0 for h3 and h4.
The >> shows up because you have used has selector in $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");. has matches if tag exists anywhere among its descendants, not just as a direct child.
is this what youre looking for? http://jsfiddle.net/tzn1x7uq/7/
1a. Main Menu is 100% width: width: 100%; /*ADDED LINE*/
1b. Menu links take up more space:
ul.dropdown li a {
display: block; padding: 4px 30px; border-right: 1px solid #333; color: #222;
} /*ADDED padding 30px*/
prevent line wrapping:
ul li {white-space: nowrap;} /*ADDED LINE*/
2b. weird highlighting stuff:
h3{ margin: 0px;}
also you have a <h4><span>text here</span></h4>, i changed it to <h3>Text here</h3>
random >> caused by »
/* COMMENTED OUT: GAVE YOU THE >> things
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
$("ul.dropdown li ul li:has(ul)").find("span:first").append(" » ");
*/
hope this helps!
You can have the hover effects using CSS only buddy.
<div id="navigation">
<ul class="menu">
<li>Home</li>
<li>User
<ul class="sub-menu">
<li>
<h3>New Users</h3>
Add New User
</li>
<li>Validate Users</li>
<li>
<h3>Current Users</h3>
Edit User Information
</li>
</ul>
</li>
<li>User 2
<ul class="sub-menu">
<li>
<h3>New Users</h3>
Add New User
<ul class="sub-menu">
<li>
<h3>New Users 2</h3>
Add New User
<ul class="sub-menu">
<li>
<h3>New Users 3</h3>
Add New User
</li>
<li>Validate Users</li>
<li>
<h3>Current Users</h3>
Edit User Information
</li>
</ul>
</li>
<li>Validate Users</li>
<li>
<h3>Current Users</h3>
Edit User Information
</li>
</ul>
</li>
<li>Validate Users</li>
<li>
<h3>Current Users</h3>
Edit User Information
</li>
</ul>
</li>
<li>User 3
<ul class="sub-menu">
<li>
<h3>New Users</h3>
Add New User
</li>
<li>Validate Users</li>
<li>
<h3>Current Users</h3>
Edit User Information
</li>
</ul>
</li>
</ul>
For CSS
#navigation:before,
#navigation:after { clear: both; content: ' '; display: block; }
#navigation ul { padding: 0; }
#navigation li { float: left; list-style: none; position: relative; }
#navigation li a { display: block; padding: 5px 15px; text-decoration: none; white-space: nowrap; }
#navigation li a:hover { background-color: #222; color: #fff; }
#navigation li ul,
#navigation li:hover ul ul,
#navigation li li:hover ul ul { display: none; position: absolute; }
#navigation li:hover ul,
#navigation li li:hover ul,
#navigation li li li:hover ul { display: block; }
#navigation li li { float: none; }
#navigation ul ul ul { left: 100%; top: 0;}
h3 { margin: 0; }
js fiddle DEMO
I need to assign .dropdown .has-panel ul .dd-panel:nth-child(2) different top:x values but it seems my nth-child is not working correct as i may be doing something wrong.
fiddle sample http://jsfiddle.net/Ed9nk/4/
I need to align Level 3/ Grand Child menus at top of the container like level 2 /Child menus so that respective level3 me menus always show at top.
i added following css
/* has set top: -64px; manually so that Parent One > Child Menu> Grand Child align to top*/
.dropdown ul ul .dd-panel {
background: none repeat scroll 0 0 red;
border-left: 0px solid #30a784;
border-right: 0px solid #008438;
bottom: 0;
display: none;
font-size: 11px;
height: 100%;
left: 175px;
line-height: 15px;
min-height: 100px;
padding: 10px;
position: absolute;
text-align: justify;
top: -64px;
width: 400px;
}
.dropdown .has-panel ul .dd-panel:nth-child(2)
{
top: -64px;
background-color:green;
}
.dropdown .has-panel ul .dd-panel:nth-child(4)
{
top: -164px;
background-color:yellow !important;
}
My simple question is i always want Image & Text related to level 2 or level 3 menus to show up as top, i tried so many thing but nothing is working finally if thought of working with nth-child but i am not abel to get it right may be mixed up elements.
Based on your Image you have added in your question, I am going to give the solution. Update your CSS like below.
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel
{
margin-top: -90px;
background-color:green !important;
}
DEMO
I am trying to add a .selected state to my navigation menu using jquery. I can see that it is trying to work, but after all is said and done, the style does not "stay". It should be white after it is clicked.
HTML:
<ul id="coolMenu">
<li class="end"></li>
<li class="mid">products
<ul class="mama">
<li class="uno"><a href="http://www.preworkoutforwomen.com"
onclick="_gaq.push(['_link', 'http://www.preworkoutforwomen.com']); return false;">Athena PreWorkout</a></li>
</ul>
</li>
<li class="midx">u.blog </li>
<li class="midx">athletes</li>
<li class="midx">about us</li>
<li class="midx">contact </li>
<li class="shop">shop </li>
</ul>
CSS:
#coolMenu {
list-style: none;
float:left;
padding-left:7.5px;
padding-right:0px;
position:relative;
}
#coolMenu ul {
-webkit-box-shadow: 0px 3px 3px 0px #4a4a4a;
border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
-moz-box-shadow: 0px 3px 3px 0px #4a4a4a;
box-shadow: 0px 3px 3px 0px #4a4a4a;
}
#coolMenu .selected {
background-position:bottom !important;
color:black !important;
}
#coolMenu li {
width:145px;
height:48px;
display:inline-block;
float:left;
background-image:url(../images/misc/images/retina-sprite_03.png);
-webkit-background-size: 750px 150px;
-o-background-size: 750px 150px;
-moz-background-size: 750px 150px;
background-size: 750px 150px;
background-position: -301px -1px;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#coolMenu > li.end {
border-bottom-left-radius:7px;
-moz-border-bottom-left-radius:7px;
border-top-left-radius:7px;
-moz-border-top-left-radius:7px;
background-position: -601px -1px;
text-align:center;
}
#coolMenu > li.shop {
text-align:center;
border-left-style:ridge;
border-left-color:#333;
border-left-width:thin;
border-bottom-right-radius:7px;
-moz-border-bottom-right-radius:7px;
border-top-right-radius:7px;
-moz-border-top-right-radius:7px;
}
#coolMenu > li.mid {
text-align:center;
border-left-style:ridge;
border-left-color:#333;
border-left-width:thin;
}
#coolMenu > li.midx {
text-align:center;
border-left-style:ridge;
border-left-color:#333;
border-left-width:thin;
}
#coolMenu li a {
display: block;
height: 2.4em;
line-height: 2.1em;
padding: 0px;
text-decoration: none;
}
#coolMenu uno,dos,tres a {
display: block;
height: .5em;
line-height: 1em;
padding: 0px;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
padding: 0px;
}
#coolMenu ul li {
}
#coolMenu ul li a {
}
#coolMenu li:hover ul.noJS {
display: block;
}
Javascript:
$(document).ready(function(){
$("#coolMenu li").click(function() {
// First remove class "active" from currently active tab
$("#coolMenu li").removeClass('selected, end, mid, midx, shop');
// Now add class "active" to the selected/clicked tab
$(this).addClass("selected");
});
});
When you click on links page is refreshed. Change them from :
<li class="end"></li>
to
<li class="end"></li>
If you want to test without refresh page.
EDIT : you can also changeyour javascript file to :
$(document).ready(function(){
$("#coolMenu li").click(function() {
// First remove class "active" from currently active tab
$("#coolMenu li").removeClass('selected, end, mid, midx, shop');
// Now add class "active" to the selected/clicked tab
$(this).addClass("selected");
//CHANGED
return false ;
});
});
This isn't in answer to your question as I'm pretty sure the other commenters have already covered that. I just want to say, I tidied up your CSS code because it was in a bit of a mess. Also you should always put the unprefixed CSS3 property under the prefixed ones (i.e border-radius: 5px; should go under -webkit-border-radius: 5px;), so that when the browser vendors drop the prefixed versions (most modern browsers don't use prefixes any more for a lot of CSS3 things, border-radius included. You should still include the prefixed versions for older versions of the browsers though.), the unprefixed versions will overwrite the obsolete prefixed versions.
Secondly, you don't seem to use shorthand CSS much, which can massively improve the effecieny of CSS. E.g background: /* code */ can cover background-image, background-position, background-size, background-color etc. Read this for more info about Shorthand CSS.
It is because after click event the clicked page opens and reloads entire page. it is completely another page after the click.
I am not sure what you actually try to do but if your pages are html, you should set the selected class in html file
for product.html
<li class="selected">products
if you are load the content by JS such as displaying another div or load by AJAX.
You should use event.preventDefault(); after the addClass function.
EDIT:
If you want to select class after load try something like this :
$(document).ready(function(){
$("#coolMenu li a").each(function () {
if (location.href.indexOf(this.href) > -1)
{
$(this).parent().attr("class", "selected");
return false;
}
});
});
Hope it works I couldn t test it.
I am creating a CSS hover drop-down menu. I have a search icon that has a hover on it also. When you hover over the icon it drops down an input for a search. However when the mouse moves off the area the search box disappears. Looking to keep the box there as long as the cursor is inside the input field, or the input is focused.
If you need me to post what I have just let me know, but it's basically just this with a standard pure CSS hover drop-down, this is the basic HTML setup:
<li class="search">
<ul class="search">
<li><input placeholder="enter search" action=""></li>
So it works but as I stated when you move off, even with the cursor flashing it will hide again. I'm assuming I'll need some sort of JavaScript to make this work, but not sure where to start with that.
You could just add and remove a class to the li using JavaScript. The code below is in jQuery though.
$( ".search" ).onmouseenter( function() {
$( "input" ).addClass( "seeMe" ).focus();
});
$( "input" ).blur( function() {
$( this ).removeClass( "seeMe" );
});
This makes the input visible and gives it focus when you hover the search li and hides when the input loses focus.
See a modified version of this on my jsFiddle.
Pure CSS Solution
No need for JavaScript to do that. Use plain CSS. I will be using O as the search icon. I have also bordered elements for visualizing their collision boxes.
Check out the Further Reading section at the bottom of this answer for more clarification.
Solution
.search {
list-style: none;
padding: 0;
width: fit-content;
border: 1px solid black;
/*border added to visualise collision box*/
}
.search-bar {
display: none;
}
.search-icon {
width: fit-content;
border: 1px solid red;
/*border added to visualise collision box*/
}
.search-icon:hover+.search-bar {
display: block;
}
.search-bar:hover {
display: block;
}
<ul class="search">
<li class="search-icon">O</li>
<li class="search-bar"><input placeholder="enter search" action=""></li>
</ul>
Animated Solution
.search {
list-style: none;
padding: 0;
width: fit-content;
border: 1px solid black;
/*border added to visualise collision box*/
}
.search-bar {
opacity: 0;
width: 0;
overflow: hidden;
transition: all 200ms ease-in;
}
.search-icon {
width: fit-content;
border: 1px solid red;
/*border added to visualise collision box*/
}
.search-icon:hover+.search-bar {
opacity: 1;
width: 100px;
}
.search-bar:hover {
opacity: 1;
width: 100px;
}
<ul class="search">
<li class="search-icon">O</li>
<li class="search-bar">
<input placeholder="enter search" action="">
</li>
</ul>
Further Reading
Check out CSS Selectors - Combinators,
Child combinator &
Adjacent sibling conbinator on MDN
I'm attempting to add a class to a group of floated list items on hover using jQuery.
I add the class and then remove the added space from the newly-inserted border using margin:-4px so that the list items do not shift around.
That's my intention at least. it's not working. Here is a fiddle:
http://jsfiddle.net/NgXSc/1/
Note how the sibling list items shift on hover. The intended result is the very last list item where upon hovering, nothing moves.
Your margin problem is being caused because although you initially define the margin to be margin-right: 19px, you overwrite it with margin: -4px !important.
Also, there's no need to use jQuery for this - just use the :hover CSS pseudoclass.
I modified your code to produce your desired results:
HTML:
<nav id="cs-client-list">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</nav><!--end cs-client-list-->
CSS:
#cs-client-list { padding: 25px; }
#cs-client-list li {
background: yellow;
float:left;
margin: 0 19px 0 0;}
#cs-client-list li a {
text-indent: -99999px;
width: 111px;
height: 80px;
border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */
display: block; }
#cs-client-list li a:hover { border-color: #000; }
Preview: http://jsfiddle.net/Wexcode/NgXSc/26/
margin: -4px is not a relative change to 19px. It completely replaces it.
Figuring out that padding adds 4px to both the left and right, you want to subract 8 pixels from the margin and use margin-right: 11px for the .over class. This keeps the list items in their original positions.
See the change in code here: http://jsfiddle.net/NgXSc/21/
Set a transparent border (or set the border-color to the background-color of the element) on the non-hovered element equal to the width of the visible border on the hovered-over element. And remove the !important; it's not necessary, just use specificity:
#cs-client-list li a{float:left;display:block;text-indent:-99999px;height:80px;background-color:yellow;width:111px; border: 4px solid transparent;}
#cs-client-list li a.over{border:4px solid #000;cursor:pointer;}
Updated JS Fiddle
This does not need jQuery, not even in IE6...
Dont mess about with negative margins. Change your .over class to
#cs-client-list li a.over{ border: 4px solid #000; width: 103px; }
This is the quickest way to get your desired effect without applying a transparent border to the non-hover state li a elements.