On hover an <li> the inner <ul> must slide the next <li> - javascript

ok, first, what i need to obtain,
The years 2011,2010,showreels where not visible until you hover PORTFOLIO (but in an iphone its when you first click, but that doesn't matter now)
now, the HTML; just a simple UL with sub UL's
<div id="nav">
<ul>
<li>PORTFOLIO
<ul class="left">
<li>2011</li>
<li>2010</li>
<li>SHOWREELS</li>
</ul>
</li>
<li>LOCATIONS
<ul class="left">
<li><img src="/img/westlich.png" alt="Westlich-t" /></li>
<li><img src="/img/sudlich_pink.png" alt="Sudlich-t" /></a></li>
<li><img src="/img/sudlich_orange.png" alt="Sudlich-t" /></a></li>
</ul>
</li>
<li>TEAM</li>
<li>JOBS</li>
<li>KONTAKT</li>
</ul>
</div>
now, the CSS
#nav ul{
}
/*Elemento del men� de navegaci�n, ejemplo: kontact*/
#nav ul li{
float:left; clear:both; height:40px;
}
#nav ul li a{ color:#000;background:#fff;width:auto;padding: 10px;margin-bottom: 4px; font-weight:bold;}
#nav ul li ul{
width:100%;
display:block;
float:left;
clear:both;
z-index:100;
margin-bottom:100px;
}
/*Sublista del men� de navegacion, de la izda; por ejemplo, portfolio*/
#nav ul li ul.left{
float:left;
}
/*Sublista del men� de navegacion, de la izda; como Locations*/
#nav ul li ul li{
width:100%;
}
#nav ul li ul li a{
width:auto;
color:#fff;
background-color:#000;
}
now, the Javascript; making the sub UL visible when the parent LI is hover
function menu_desplegable(){
$("#nav ul li ul").css({display: "none"}); // Opera Fix
$("#nav ul li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function() {
menu_desplegable();
});
as you can test here the dropdown effect works, but it doesn't move next <li>; for example if you hover porfolio you can see the sublist underneath the rest of the <li>'s and I need them to move,
how can i Solve this? I guess i can fix it with only CSS but i'm very lost. Specially because it doesn't even respect the higher z-index :S

Change 4 things:
Use .show() and .hide() instead of .css({visibility: "hidden"}). The latter will hide the element but reserve space for it on the page, resulting in whitespace. You want .show() and .hide() because these use display: none which hides the element and removes the space it takes up on the page.
Remove this style declaration:
#nav ul li
{
height: 40px;
clear: both;
float: left;
}
Remove the bottom margin style definition from the subnav ul (#nav ul li ul).
Add display: inline-block; to #nav ul li a.
That fixes it: http://jsfiddle.net/gilly3/3QffD/2/
But you could really clean up your css a lot (looking at the css from your link). Most of those styles are unnecessary and only make debugging harder. In particular I see a lot of float, clear, and width: 100% that are unnecessary or even detrimental. Try to avoid those unless you are sure you need to.
Here's my version with most of the css removed: http://jsfiddle.net/gilly3/3QffD/

You are restricting your height on #nav ul li which is preventing it from growing. I'll paste a jsfiddle in a second.

This is actually achievable without Javascript by simply using the :hover selector in CSS. Here's an example:
http://jsfiddle.net/ebiewener/7d7sr/
However, the real cause of your problem is this bit of your CSS:
#nav ul li{
float:left; clear:both; height:40px;
}
By giving the li a fixed height of 40px, the page doesn't move the following li tags down when you hover over it, because it is still considering them to be 40px. So, instead of making your #nav ul li {height:40px}, apply that 40px to the height of the anchor tag it contains: #nav ul li a {height:40px}. This will allow the height of the containing li to expand when it's child ul is shown.

Related

how to change the parent div's height?

I am new to CSS. I want to apply background color for div. But the div height is zero. div has child elements too.
Here is my code. I added float to that ul,li elements.I searched so many sites I applied clear to the div ,but its not changing.
<div id="menulinks">
<ul class="dropdown">
<li>
projectCategoraization
<div id="submenu_pc">
<ul class="submenu">
<li>dgfdg</li>
<li>tutyu</li>
<li>ert45</li>
<li>7y56uty</li>
</ul>
</div>
</li>
</ul>
</div>
style
#submenu_pc {
width:240px;
display:none;
position:absolute;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.submenu {
position:absolute;
}
.dropdown ul li {
float:none;
}
script is
$(function(){
$(".dropdown li").hover(function(){
//alert("soumya");
$(this).addClass("hover");
$('#submenu_pc').css('display', 'block');
});
});
.submenu has position: absolute which means its parent has a height of 0. Remove position: absolute and assign a background color to the parent; that should do it.
jsFiddle
Adding background color to the UL with class of submenu
.submenu
{
background-color:aqua;
}
Add this CSS and remove the script completely!
#menulinks{
overflow:hidden;
background: red; // choose your color
}
#submenu_pc {
width:240px;
display:none;
}
.dropdown li:hover #submenu_pc{
display: block;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.dropdown ul li {
float:none;
}

How to change visibility with onclick

Hi I'm new to Javascript and since there is no onclick for css I need a little help.
This is my html:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
and this is my css:
#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;
}
#dropnav ul {
padding:0px;
margin:0px;
}
#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;
}
#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}
#dropnav ul li a:hover {
background-color:#666666;
}
#dropnav ul li ul li {
width:99.8%;
}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;
}
#dropnav ul li ul {
visibility:hidden;
}
#dropnav ul li:onclick ul {
visibility:visible;
}
Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help
One way to change visibility onclick is by adding an event attribute to your html tag:
onclick="this.style.visibility='hidden';"
For example, here is your navigation bar with disappearing links:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
Drop this (it's useless):
#dropnav ul li:onclick ul {
visibility:visible;
}
Add This:
#dropnav ul li.open ul {
visibility:visible;
}
JS:
$('#dropnav ul li').click(function(){
$(this).addClass('open');
});
Just adding a class, which can be further dealt with in plain CSS. This way your application won't be bound by any strict laws.
You can do this with pure css3 by abusing the :not pseudo class. For example you can trigger an animation after an onclick has happened.
Click
<style>
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
</style>
Try it - http://jsfiddle.net/WG4Sf/
Here is a good article on CSS click events and if you should use them. http://www.vanseodesign.com/css/click-events/
You can do something like this
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
Click Me<br/>
<div id="d">This is just example</div>
</body>
</html>
Try this:
$('#dropnav ul li').click(function() {
$(this).parent().css('visibility','visible');
})
try this.
:active is ur required css property
WORKING SAMPLE
I have just changed the visibility property for my convinience. U can change it to what u need exactly.

Width issue with website dropdown menu

So ive just started the master page for my new site and i put in a dropdown menu which i tested out by dropping it from the home button. Image below:
http://prntscr.com/28qnk2
My problem occurs when i tried to apply the same code to my plugins button in the menu, the whole thing spaces out. Image below:
http://prntscr.com/28qpky
This is the first time ive tried to build in a dropdown menu so my initial attempts probably have some issues with them but i cant seem to get this to work. Here is the code for the menu (html).
<div id="menu">
<table id="menu_table">
<tr>
<td id="home" class="menu_item" style="position:relative; z-index: 1000">
<ul class="dropdown">
<li><p>Home</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="about_us" class="menu_item">About Us</td>
<td id="plugins" class="menu_item">
<ul class="dropdown">
<li><p>Plugins</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="tutorials" class="menu_item">Tutorials and Help</td>
<td id="staff" class="menu_item">Staff</td>
<td id="chat" class="menu_item">ChatRoom</td>
</tr>
</table>
</div>
and here is the CSS for the menu:
#menu {
position:relative;
float:right;
margin:2px;
margin-right:13%;
width:52%;
height:77px;
}
#menu_table{
position:relative;
top:12%;
height:76%;
width:100%;
border-spacing:0px;
}
.menu_item:first-child{
border-left:1px solid #40d7bc;
}
.menu_item:hover{
background-color: black;
color:#40d7bc;
}
.menu_item{
border-right:1px solid #40d7bc;
text-align:center;
}
ul.dropdown li ul {
display:none;
position:absolute;
z-index:100;
padding-left:50%;
top:35px;
width:100%;
}
ul.dropdown li ul li {
position:relative;
border-top:30px solid black;
left:-50%;
background-color: black;
}
ul.dropdown li ul li:last-child {
border-bottom:15px solid black;
}
.menu_item li {
list-style-type: none;
}
and finally the small bit of jQuery i used.
function() {
$('ul', this).stop(true, true).slideToggle(100); },
function() {
$('ul', this).stop(true, true).slideToggle(100); }
);
Thanks for any help on this, im completely lost on whats wrong with it.
The only idea i may have with what the issue is, is how i aligned the text to the center. I did it by padding the ul containing the submenus by 50% width, this way the left side of the ul was down the middle and when i shifted the submenu items left by 50% width they were in the middle. You're probably thinking why shift them at all, well for some reason if i left them in the middle it covered up part of the borders on the menu, screenshot:
www.prntscr.com/28qwvv
If I'm being an idiot and my question is stupid please feel free to point it out as long as you give me a reason
I noticed that you are applying an inline style position relative to your home TD.. Remove the inline style and add this to your css.
.menu_item {
position: relative;
}
This should do the trick. Relative elements will contain absolute elements, and it appears that you are not containing it to the plugin width. See my comments above.

How to determine which element is actually being hovered

I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.
I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".
Simple Div Structure:
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??
Like:
$("#menu").hover( // Div Menu is being hovered
function () {
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
},
function () {
$el..hide();
}
);
Or maybe my structure is completely wrong, Should use another method to do this? Please help.
$("#menu").hover( // Div Menu is being hovered
function (event) {
$el = $(event.target);
$el.show();
},
function (event) {
$el = $(event.target);
$el.hide();
}
);
Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.
This means you have to bind the handler to every single element in the menu tree:
$("#menu div").hover(
function (event) {
console.log(event);
$(this).children().show();
},
function (event) {
$(this).children().hide();
}
);
Demo at jsfiddle.net
Yes you could use the code you wrote for determining when you hover a div. Then you trigger a function for displaying the dropdown menu. When you define the css of the navigation bar you should set the part that doesn't have to be visible at the beginning to display:hidden; in the div, so it's hidden. Then through jquery you inject code into the css for changing the property display. I give you an example. Let's assume you create a div called "hidden" and set this in the css among other possible styles:
#hidden {
display:hidden
}
Then you want the part with id "hidden" to appear when you hover the mouse.
You can use:
$("#hidden").hover.css('display', 'block')
so the hidden part will appear.
Anyway you can create a dropdown menu even simply by using css only without jquery.
Here i give you an example:
Let's say you have this markup in the html file
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
<li>Sevice three</li>
<li>Sevice four</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
<li>Small product (three)</li>
<li>Small product (four)</li>
<li>Big product (five)</li>
<li>Big product (six)</li>
<li>Big product (seven)</li>
<li>Big product (eight)</li>
<li>Enourmous product (nine)</li>
<li>Enourmous product (ten)</li>
<li>Enourmous product (eleven)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
As you can see here the markup is simply a series of nested "ul". No verbose IDs/classes, no divs, just rich, semantic code.
The #nav ul contains a series of li, and any that require a dropdown then contain another ul. Notice the dropdown ul have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
Now the CSS:
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* 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). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#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:#6b0c36;
text-decoration:underline;
}
#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;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
So by using a nested unordered list and some css you can make an effective dropdown menu. That is the best solution according to me. Because the easier way you can make a thing the better it is.
For more details and a full explaination and demo of the dropdown menu, go to: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Of course you can set the colors and style as you prefer.
If you want a flyout vertical menu like that on Amazon check this example. It's simple, just html and css, no jquery. It looks alike.
HTML:
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>​
CSS:
ul.nav{
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
}
ul.nav li{
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
}
ul.nav > li:hover{
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
}
ul.nav > li:hover > span{
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
}
ul.nav li a{
color: #666;
text-decoration: none;
}
ul.nav li a strong{
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
}
/* dropdown */
ul.nav li ul{
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
}
ul.nav li:hover > ul{
display: block;
}
ul.nav li ul li{
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
}
ul.nav li ul li a strong{
font-weight: normal;
color: #034995;
}
Look at the code and demo here: http://jsfiddle.net/blackpla9ue/KHLgm/8/
You can edit and add things as you prefer.
​

Vertical menu css3

I am stuck on the creation of a vertical menu with submenu:
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>Subpage</li>
<li>Subpage 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
Clicking on "Pages" the menu should be something similar to this:
The basic mechanic can be achieved like this:
ul li ul {
display: none;
margin-left: 20px;
}
li:hover ul {
display: block;
}
jsFiddle: http://jsfiddle.net/elias94xx/sCXus/
Without the use of images it's somewhat tricky to achieve the effect in your images above, but I got a decent example working:
jsFiddle: http://jsfiddle.net/elias94xx/sCXus/5/
Try This
use this CSS:
ul{
list-style:none;
}
ul li ul{
list-style:none;
display:none;
}
apply jQuery library and this function:
$(document).ready(function(){
$("ul li").click(function(){
$(this).children('ul').show();
});
});

Categories