I implemented the Lavalamp tab menu in my website: when Mouse goes on absolute Div "#lavalamp" bottom "subs" div not display.How to fixed this, please help me.
Detail code click here
<ul id="nav">
<li><a class="hsubs" href="#">Magento</a>
<div class="subs colbg01">
Submenu 1
</div>
</li>
<li><a class="hsubs" href="#">Wordpress</a>
<div class="subs colbg02">
Submenu 2
</div>
</li>
<li><a class="hsubs" href="#">Mobile App</a>
<div class="subs colbg03">
Submenu 3
</div>
</li>
<div id="lavalamp"></div>
The problem happens when you hover over the triangle, which causes the underlining li to lose its own hover and thus invalidating the active li:nth-child(..) ~ #lavalamp rule.
You can solve this issue with modern browsers by disabling the pointer events on the lavalamp element
#lavalamp{pointer-events:none;}
demo at http://jsfiddle.net/gaby/6Lmgkhxd/4/
Notice: IE added support for pointer-events on v11
The reason this is not working is because the hover state of the li is being broken when hovering over the #lavalamp element (which appears later in the DOM).
If you really want a CSS only fix you can use z-index to place the triangle behind everything else and bring the li forward.
like:
#nav li {
float: left;
display: block;
padding: 16px 20px 18px 20px;
z-index: 1; // <--- added this
}
#lavalamp {
z-index: -1; // add this
... other code
}
example: http://jsfiddle.net/6Lmgkhxd/3/
I changed the li's background-color to transparent to allow this to work.
Also there seems to be a slight gap between the li and the.subs so I increased the bottom padding of the li to overlap better to the 50px top positioned .subs (from 16px to 18px)
Related
I have a navigation bar I've built with a few links in it (using a ul with li and anchors) and I'm trying to figure out how to make certain links dropdowns with more links inside of them. I tried following the w3schools example of dropdowns but it seems like my links are just "scrunching" together. Here's the code:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
<nav class="main-nav-container">
<ul>
<div class="dropdown">
<li>
Climb
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
<li>News</li>
<li>Events</li>
<li>About</li>
<li>Donate</li>
<li>Merchandise</li>
</ul>
</nav>
What it looks like on my end is that the links are all scrunched together. I want it so that the dropdown appears on hover (so, display changes from none to block), but the actual content of the dropdown is appearing inline with the navigation links instead of underneath like it should be. What am I missing/doing wrong?
I created a stackblitz for you. Is this what you're looking for?
You can make you content display: flex; while using flex-direction: column; instead of display: block;.
If you want the dropdowns to animate in and out eventually, you'll need to use javascript unless you're a real css wizard. Basically, you'll add a visible class on mouseenter that changes the dropdown from display: none to display: block and sets the starting state of your animation, like opacity: 0. Then, after a requestAnimationFrame, you add an in class that sets the final state of your animation, like opacity: 1. The requestAnimationFrame is needed because going from none to block causes the browser to cancel any css animations.
The close animation is the same principle: you remove the in class on mouseout, then after a timeout for however long your animation is, you remove the visible class.
Here's my code:
jsfiddle.net/q49hb
<ul id="navigation">
<li><a class="" href="#">Home</a></li>
<li><a class="" href="#">Blog</a></li>
<li><a class="" href="#">Services</a></li>
<li><a class="" href="#">About</a></li>
</ul>
There's a little caret cursor in between each list item when hovering over. I noticed floating to the left will get rid of it, but then I can't center the navigation, which I am also trying to do. Any help?
So to re-cap, I'm looking to:
Space out the list items, leaving no excess space.
Not show a carrot cursor when hovering in between the items.
Centering the unordered list nav on the page.
None of the answers above are correct or even close. You need users to know what is clickable and what isn't. The caret is in fact misleading and distracting between list items. This is bad UX. You cannot blitz the ul with cursor: pointer; then everything will seem clickable, even bewteen li's.
reset the entire ul's clickable area (even between list items)
ul{
cursor:default;
}
Now define what is clickable.
ul li{
cursor:pointer;
}
You can do one of two things.
You can set the parent element (#navigation) so cursor: pointer; which will stop the caret from showing in between links:
http://jsfiddle.net/q49hb/1/
#navigation {
cursor: pointer;
}
Or you can remove the whitespace between the <li>s, which is what's causing the default caret cursor type to show.
http://jsfiddle.net/q49hb/2/
<li><a class="" href="#">Home</a></li><li><a class="" href="#">Blog</a></li><li><a class="" href="#">Services</a></li><li><a class="" href="#">About</a></li>
EDIT: Option 2 is better, (but the code isn't very neat,) because Option 1 gives users the illusion that the space is clickable when it isn't (thanks #JoshC)
you can set a minus margin-left to force the LI to be together and a set a width for the anchors:
demo
#navigation li {
display: inline;
margin-left: -4px;
}
#navigation a{
width: 60px;
display: inline-block;
}
I have a simple menu with a hover state:
<nav id="menu">
<div>Home</div>
<div>
1
<nav>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</nav>
</div>
</nav>
CSS:
#menu > div > nav {
display: none;
position: absolute;
z-index: 9999;
}
#menu > div:hover > nav {
display: block;
}
But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)
It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.
No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.
You can use the hover media query to disable hover states on iOS:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/hover
I have a menu which can be seen in the link below:
http://fiddle.jshell.net/V88c6/8/show/
Here is the full jsfiddle
http://jsfiddle.net/V88c6/8/
Here is the HTML
<div id="head_1">
<div class="inner">
<div class="column_0">
LOGO
</div>
<div class="column_1">
LINK 1
LINK 2
LINK 3
LINK 4
</div>
<div class="column_2">
<span>USER NAME</span> LOGOUT
</div>
<div class="clearfix"></div>
</div>
</div>
For some reason the LOGOUT link's top border on hover seems to be a pixel higher then the rest of the links. This happened when I added some css reset script.
Here is a link of the same page without the css reset where the LOGOUT link works fine:
http://fiddle.jshell.net/V88c6/9/show/
I like to use the css reset script to help the page look similar on most popular browsers.
Anyone know why the css reset script would be interfering with the LOGOUT link only?
Tested on IE7, IE8, Latest Google Chrome, latest Firefox, Latest Opera.
You are trying to style it the bad way. Try styling it like this - whit li ul:
<div class="column_1">
<ul class="menu_link">
<li><a href="#" >LINK 1</a></li>
<li><a href="#" >LINK 2</a></li>
<li><a href="#" >LINK 3</a></li>
<li><a href="#" >LINK 4</a></li>
<ul>
</div>
<div class="column_2">
<ul class="menu_link">
<li>username</li>
<li><a href="#" >LINK 4</a></li>
<ul>
</div>
and these are the selectors:
.menu_link li{}
.menu_link li a{}
you can try this one also
#head_1 .inner .column_2 {
display: block;
float: right;
padding: 0 15px;
}
#head_1 .inner .column_2 .menu_link {
border-top: 17px solid transparent;
padding: 17px 15px 10px 15px;
display: inline-block;}
The problem has to do with the computed value for the display property.
Your middle column with "LINK 1" and so on shows .menu-link with float: left, which causes the <a> elements to be block instead of inline.
You "LOGOUT" link shows .menu-link with no float, so the <a> element is inline.
The inline element affects the height of its inline box differently from a block element.
There was some style property in your browser's default style sheet that was masking this effect, and when you used a reset CSS style sheet, it appears.
The fix would be to layout out the two elements on the right (User Name and Logout) as floated element or to tweak the margin or line height by 1-2 px (involves trial and error, groaning).
The Fix
I was able to get a consistent layout by doing the following by adjusting your CSS as follows:
#head_1 .inner .column_2 {
display:block;
float:right;
/* padding:34px 0px 10px 15px; Remove this... */
}
#head_1 .inner .column_2 .menu_link{
border-top:17px solid transparent;
padding:17px 15px 10px 15px;
float: left; /* add this.. */
}
/* Float your span like you floated the link... */
#head_1 .inner .column_2 span {
border-top:17px solid transparent;
padding:17px 15px 10px 15px;
float: left;
}
Fiddle: http://jsfiddle.net/audetwebdesign/Myhcy/
The key is to keep a consistent coding style in laying out your two menus.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.