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.
Related
I'm creating a responsive website and the menus for the tablet and mobile layouts need to be different then the pc layout. So my client wants his logo coming first to the tablet/mobile layout, i tried to use jquery but is not working, can someone help me?
I need the li fot the logo be the first when the window width is lesser then 1024px, but my jquery is not working.
html:
<nav class="nav">
<ul>
<li><img class="lupa" src="img/lupa.png" alt="Search" onClick="ShowFieldSearch()">
<div id="boxSearch">
<form id="formSearch" action="" method="get">
<input id="search" type="text" value="" maxlength="150" placeholder="Search..." onBlur="HideFieldSearch()">
</form>
</div>
</li>
<li>Home Page</li>
<li>Products<img class="flechaVertical" src="img/flecha.png" alt="flecha">
</li>
<li><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></li>
<li>About</li>
<li>Contats</li>
<li>Doubts</li>
</ul>
</nav>
CSS:
#boxSearch{
padding-left:15px;
}
#Search{
width:160px;
height:50px;
margin-left:10px;
display:none;
position:absolute;
text-align:center;
border:1px solid #222222;
}
/* -------------------------------*/
/* Navigation Menus */
.lupa{
width:30px;
height:30px;
padding-left:35px;
}
.flechaVertical{
width:8px;
height:8px;
padding-left:5px;
}
.navLogo{
width:160px;
height:90px;
}
.nav{
width:200px;
margin: 0;
text-align: left;
background-color: #FFFFFF;
position: fixed;
}
.nav ul{
list-style:none;
padding:0;
margin:0;
position:relative;
}
.nav ul li{
display:block;
}
.nav ul li a,visited{
color:#000000;
display:block;
padding:10px;
padding-left:30px;
text-decoration:none;
}
.nav ul li a:hover{
color:#990000;
text-decoration:none;
}
Jquery:
$(document).ready(function(){
var $logo = $(".nav ul li").eq(3);
function PositionLogo(){
if($(window).width() < 1024){
$logo.remove().insertBefore(".nav ul li:first-chiild");
}
else{
$logo.remove().insertAfter(".nav ul li:nth-child(3));
}
}
});
There might be a better option but this works as well :
Your jQuery needs to be cleaned too.
HTML
<li class="logo">
<img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll">
</li>
jQuery
$(document).ready(function() {
alert($(window).width() + "doc");
var $logo = $(".logo");
if ($(window).width() < 1024) {
$logo.remove();
$(".nav ul li:first-child").append($logo)
}
});
since you're firing it on document ready i dont think you need the else condition.
Also, your code wouldn't change the position if the window is resized.
Also, I think its better to fire it.
$(window).load(function() {
// your code
});
and here's the JSFiddle
If you need this small change just skip Jquery and use CSS Media Queries to hide and display a logo for desktop and one for mobile using ids.
Here is the fiddle (resize the results block). It will change at 800px in this case so you can see the results on the fiddle.
First add this line in your head for responsiveness
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML:
<nav class="nav">
<ul>
<li id="logo_nav">Logo Nav</li>
<li><img class="lupa" src="img/lupa.png" alt="Search" onClick="ShowFieldSearch()">
<div id="boxSearch">
<form id="formSearch" action="" method="get">
<input id="search" type="text" value="" maxlength="150" placeholder="Search..." onBlur="HideFieldSearch()">
</form>
</div>
</li>
<li>Home Page</li>
<li>Products<img class="flechaVertical" src="img/flecha.png" alt="flecha">
</li>
<li id="logo_desktop"> logo Desktop</li>
<li>About</li>
<li>Contats</li>
<li>Doubts</li>
</ul>
</nav>
CSS
#logo_nav{
display: none;
}
#media only screen and (max-width: 1024px) {
#logo_desktop {
display: none;
}
#logo_nav {
display: block;
}
}
This should work
I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
Any help would be greatly received.
Thanks. My website link is www.theiab.org/IABPHP.
HTML:
<html>
<head>
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
//e.preventDefault();
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu" class="parent" >
<li class="menu-item"><div id="whoWeAre">WHO WE ARE</div>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><div id="subMenuItem1">ABOUT FOUNDER</div></li>
<li class="sub-menu-item2"id="sub-Menu-Item2"><div id="subMenuItem2">ABOUT IAB</div></li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item">NEWS & EVENTS</li>
<li class="menu-item">CONTACT</li>
</ul>
</nav>
</body>
</html>
CSS:
nav {
float:right;
padding:38px 0 0;
}
nav li {
position:relative;
display:inline-block;
}
nav ul li a {
color:#a0a0a0;
font-weight:bold;
}
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
nav li:hover .sub-menu{
visibility:visible;
opacity: 1;
transition: all 1s ease;
}
ul.sub-menu {
visibility:hidden;
opacity:0;
transition: visibility 1s linear 0.5s,opacity 0.5s linear;
position:absolute;
top:27px !important;enter code here
left:0px;
z-index:5000;
list-style:none;
margin:0;
padding: 0 !important;
width: auto;
min-width:150px;
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
}
ul.sub-menu li {
width:100%;
float:left;
border-bottom: 1px solid #ccc;
margin: 0 !important;
line-height:100%;
padding: 10px 0px !important;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
nav ul.sub-menu li a {
padding:0px 12px;
height: auto;
font-size:13px !important;
display: block;
}
ul.sub-menu li:hover {
border-top:none !important;
background: #f9f9f9;
}
You need to change this:
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
To this:
nav li:hover a {
color:#e53b51;
text-decoration: none;
}
That way when you hover over the list-item (li), the anchor (a) will be changed. The way you had it, you needed to hover over the ANCHOR ITSELF for the hover state to be activated. Now hovering over the list-item will activate the changes.
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;
}
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();
});
});
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.