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();
});
});
Related
I want to create a simple dropdown menu when a user clicks on an image. Currently I'm using CSS hover but it doesn't stay so I want to convert it to a JS onClick function.
<html>
<head>
<style>
ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
}
ul li ul {
padding: 0;
position: absolute;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: block;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style></head><body>
<ul>
<li>
<img src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" width="20px;" height="18px;"/>
<ul class="lang">
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
</ul>
</body>
</html>
With a little jQuery, we can easily toggle a class on or off to represent 'showing' the menu:
$("#menu").click(function(){
$(this).toggleClass("activated");
});
And changing the CSS (instead of :hover) to:
ul li.activated ul {
display: block;
opacity: 1;
visibility: visible;
}
The HTML only needs that first li element to have an id, which lets us use jQuery to bind a click event to it.
<ul>
<li id="menu">
You can see it all in action on this fiddle.
Edit: For a non-jQuery solution, you can use the following Javascript code:
var myEl = document.getElementById('menu');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
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.
I've the following code:
<div class="container">
// some other code
<ul>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</div>
The <a> links are styled as buttons.
Now I want to achieve, when I hovering the <a> link, I will add a background image to the container-div. But each of the <li>'s have their own image. So when I hover the "about" link, the container div get's a "about"-image. When I hover the "service" link, the container div get's a "service"-image.
How can I achieve that?
What I already tried:
.container ul li a:hover .container{ background-image: url('path/to/image) }
.container ul li a:hover > .container{ background-image: url('path/to/image) }
.container ul li a:hover ~ .container{ background-image: url('path/to/image) }
.container ul li a:hover + .container{ background-image: url('path/to/image) }
WHEN IT IS NOT POSSIBLE WITH ONLY CSS, Is there a way with JavaScript / jQuery?
jQuery:
$('.container > ul > li > a').each(function() {
$(this).hover(function() {
$('.container').toggleClass(this.hash.replace('#', ''));
});
});
CSS:
.about { background-image: url('path/to/image1') }
.service { background-image: url('path/to/image2') }
.contact { background-image: url('path/to/image3') }
I don't think it is possible using css alone
<div class="container">// some other code
<ul>
<li>
about
</li>
<li>
service
</li>
<li>
contact
</li>
</ul>
</div>
then
.container.about{
background-image: url(...)
}
and
jQuery(function ($) {
$('.container li a').hover(function () {
$('.container').addClass($(this).data('type'))
}, function () {
$('.container').removeClass($(this).data('type'))
})
})
Demo: Fiddle
<div class="container">
// some other code
<ul>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</div>
$(document).ready(function() {
$('#1').hover(function(){
$('.container').css("background","url(images/pic1.jpg)");
}, function () {
$('.container').css("background","'none'");
});
$('#2').hover(function(){
$('.container').css("background","url(images/pic2.jpg)");
}, function () {
$('.container').css("background","'none'");
});
$('#3').hover(function(){
$('.container').css("background","url(images/pic3.jpg)");
}, function () {
$('.container').css("background","'none'");
});
});
I am building a menu that is driven by CSS and I have come across a problem for keyboard users. There is no cross browser support for the CSS :focus selector, so I am trying to build a jQuery script that will perform the same action.
HTML menu:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What We Do
<ul>
<li>What we do1</li>
<li>What we do2</li>
</ul>
</li>
<li>Test Studies</li>
</ul>
</div>
CSS rules for menu:
#nav ul {
padding: 0; margin: 0;
}
#nav ul li {
list-style: none;
font-size: 16px;
}
#nav ul li ul li {
font-size: 13px;
}
#nav ul li ul {
display: none;
}
.showMenu, #nav ul li:hover ul{width:200px; padding:7px; background: #F2F2F2; border:1px solid #F2F2F2; display: block; position: absolute; left: 85px; top: 30px; }
Here is the jQuery code that I am trying to get to work:
$(document).ready(function(){
$('#whatWeDo').focus(function() {
$(#nav ul li ul).addClass("showMenu");
});
});
you forgot quotes:
$(document).ready(function(){
$('#whatWeDo').focus(function() {
$('#nav ul li ul').addClass("showMenu");
});
});
You have forgotten quotes, the jQuery should be:
$(document).ready(function(){
$('#whatWeDo').focus(function() {
$('#nav ul li ul').addClass("showMenu");
});
Like noted in other answers, surrounding your innermost selector with quotes should do the trick.
Though, I'd like to further point out that it is recommended to bind events using the on() function, which was added in jQuery 1.7. Here's how your code would look using on():
$(document).ready(function(){
$("#whatWeDo").on("focus", function() {
$("#nav ul li ul").addClass("showMenu");
});
});
Here is more info about on().
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.