I am currently developing an ASP.NET webpage and I have run into the most irritating problem I have ever encountered.
I have been researching this problem for the past three days, and cannot find anybody who has even had this problem, let alone any solutions.
I have created a menu/submenu with HTML/CSS, and I am adding some kind of toggling effect to the submenu to make it either slide down or fade in (I've tried both, and both yield the same result).
In Internet Explorer, it works great. I can hover over the menu, it'll slide down or fade in correctly, then when I move the mouse away it'll disappear.
In Chrome/Firefox, I'm not so lucky. The submenu starts out hidden, then if I hover over it once, it will appear. If I move the mouse away, it instantly closes and then re-opens on its own. At this point, it's beyond return. If I hover over it, it disappears, and if I move the mouse away again, it'll re-appear. This will continue to happen until the page reloads.
Here is the menu in HTML...
<ul id="menu">
<li>Home</li>
<li>Services
<ul id="submenu">
<li>Custom CRM</li>
<li>Website Development</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
As for the CSS pertaining to this menu, this is it...
#menu
{
padding:0;
text-align: center;
margin: 0;
width: 100%;
}
#menu li
{
height: 35px;
float: left;
list-style: none;
width: 25%;
font-size: larger;
cursor: pointer;
position: relative;
}
#menu li a
{
display: block;
height: 35px;
text-decoration: none;
color: White;
font-weight: bold;
padding-top: 5px;
}
#menu li:hover
{
background-color: #4CC417;
}
#menu li:hover ul
{
display: block;
}
#menu ul
{
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 36px;
width: 140%;
display: none;
list-style: none;
left: 0;
}
#menu ul li
{
text-align: left;
font-size: medium;
width: auto;
float: none;
background-color: #387C44;
color: White;
font-weight: bold;
padding-left: 5px;
}
#submenu ul
{
display: none;
z-index: 999;
}
#submenu
{
display: none;
}
And finally, here is the JQuery code I created for this...
<script type="text/javascript">
$(document).ready(function () {
$("#menu ul").parent().hover(function () {
$("#submenu").stop(true, true).fadeToggle("slow");
});
});
</script>
Any help is greatly appreciated. Thank you!
--Mark
http://jsfiddle.net/9LEMZ/3/
Is this what your after? (If not please feel free to direct me further!)
I've changed the jquery completely to fade in the sub elements, initially hiding the submenu. Also removed the display:none from the css to aid in this (as its now hidden through .hide() )
Cheers,
Primarily, hover accepts two function parameters (one for mouseover and one for mouseout). Second, I'm going to recommend using on:
$('#menu > li').on({
mouseover: function() {
$(this).children('ul').slideDown(300);
},
mouseout: function() {
$(this).children('ul').stop(true, false).hide();
}
});
Through jQuery's checks and balances, it will return if the li has no child ul.
Related
I'm trying to create a slideshow for my website, where it doesn't use any timer of a kind because that's what I have right now, but I want the user to be able to use the navigational buttons. I've been trying to google it but everything I come across seems really complex and I can't get a hold of it. So was wondering if anyone here would be willing to explain how I would do that.
Here a picture of the situation is and how I'm gonna use it. It's an overlay.
does you website support bootstrap if its is you can use bootstrap Carousel slider.
you can stop auto slide by setting the property
$('.carousel').carousel({
interval: false
});
USE THIS CODE FOR NAVIGATION PANEL WITH DROP DOWN FUNCTION
body
{
/*background: url (whatever you want to use) no-repeat; */
background-size: cover;
font-family: Arial;
color: white
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li
{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a
{
color: white;
display: block;
}
ul li a:hover
{
background color:green;
}
ul li ul li
{
display: none;
}
ul li:hover ul li
{
display: block;
}
<html>
<link href ='style.css' rel= 'stylesheet' >
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a>First</a></li>
</ul>
</li>
</html>
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.
<header>
<a class="home" href="../index.htm" title="Home Page"></a>
<a class="to_nav" href="#nav" ></a>
<div class="logo">
<a href="#top">
<h1>Deeran</h1>
<span>Graphic Design</span>
</a>
</div>
<nav>
<ul class="drop">
<li>
<a id="menu"></a>
<ul class="hide">
<li>Portfolio</li>
<li>About</li>
<li>Contact/Hire</li>
</ul>
</li>
</ul>
</nav>
</header>
And here's the css
nav {margin: 0; padding: 0;}
nav ul li a#menu {
display: block;
width: 67px;
height: 50px;
position: absolute;
right: 0px;
top: 0px;
margin-top: 9px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
nav ul ul.hide {
display: none;
list-style: none;
margin: 10px 0 0;
text-indent: none;
clear: both;
width: 100%;
position: absolute;
left: 0px;
}
nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
if there was one simple way to convert that one :hover function to onClick I would be very grateful :)
make
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
to
nav ul li.active > ul {
display: block;
list-style-type: none;
}
Then use javascript to add a class active onClick.
What makes SO wonderful is that we can refer to similar cases easily :)
For javascript part please refer this answer .
Add/Remove class onclick with JavaScript no librarys
The 'click' event cannot be listened for with css. Remove your :hover rule and add some JavaScript. In the code you provided, you don't have anything in the #menu element for the user to click on, so I added some text for the fiddle.
http://jsfiddle.net/Fc75u/
JavaScript:
var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});
jQuery:
$('#menu').click(function () {
$('.hide').toggle();
});
I have an issue with my navigation menu. It's basically a logo image that when hovered a submenu slides down and then slides up when not hovered on. It works fine on desktops but the issue I am having it with mobiles devices. Specifically the iPad. For some reason the iPhone seems to translate it OK but on the iPad the first time you click the image the drop down menu slides down and then up quickly and will not appear again. I have been searching the net for a solution and have tried rewriting the menu completely to use click instead but still haven't had it work properly on an iPad. If someone could help me or point me in the right direction I would REALLY appreciate it!!
I've also put the sections of code in js fiddle
<div id="button">
<ul class="hover">
<li class="hoverli">
<img src="assets/images/menu_logo.jpg" width="210" height="160" class="menu_class"/>
<ul class="file_menu">
<li>our work
</li>
<li>about
</li>
<li>contact
</li>
<li class="#">blog
</li>
</ul>
</li>
</ul>
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').slideDown('medium');
},
function () {
$('ul.file_menu').slideUp('medium');
});
$(".file_menu li").hover(
function () {
$(this).children("ul").slideDown('medium');
},
function () {
$(this).children("ul").slideUp('medium');
});
});
the css
#newmenu {
position: absolute;
height: 32px;
width: 184px;
left: 35px;
top: 100px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#submenu {
display:none;
width:100px;
position: relative;
left: 110px;
font-family: helvetica;
font-size:12px;
}
#submenu li {
background-color: #FFFFFF;
position: relative;
}
#submenu li a {
color:#00000;
text-decoration:none;
padding:5px;
display:block;
text-align: right;
padding-right: 13px
}
.file_menu li a:hover {
color: #585858;
}
.blog {
padding-bottom: 10px;
}
As you've found, touch devices (Android included) don't handle Hover or Mouse events. Consider using .click() or .change(), which I have found to be especially useful on DDL or other menu/filtering behavior.
I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});