I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
});
$("#flip").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
}
#panel {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="flip">
<ul>Home</ul>
</div>
<div id="panel">
<ul>Sub
</br>
Sub
</br>
Sub
<ul>
</div>
</body>
</html>
`
A nested unordered list would work, something like this:
<ul id="flip">
<li>Home
<ul id="panel">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
In CSS, all you would need is to hide your sub-menu:
#panel {
display:none;
}
jQuery is the same as you had it.
See here: http://jsfiddle.net/kaizora/23uuL/
PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.
How about this:
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
$("#panel").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
Fiddle Here: http://jsfiddle.net/vWGsC/
If you want to you cold also use pure CSS.
<ul class="nav">
<li class="dropdown">
Home
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="dropdown">
second dropdown
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
This would be the html from something I have saved some time ago.
Try it out! :)
http://jsfiddle.net/patrickhaede/dqxm4/
DEMO Background color is for clearly view for user.
var temp = $('#flip ul li:eq(0)').nextAll();
temp.hide();
$('#flip ul').mouseenter(function(event) {
temp.slideDown("slow");
});
$('#flip ul').mouseleave(function() {
temp.slideUp("slow");
});
#flip li , #flip ul { list-style-type: none; background-color: yellow;}
Home
Sub
Sub
Sub
Related
I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.
And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.
function closesSan() {
document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important');
}
#main:hover .submenu {
display: block!important;
}
<ul>
<li id="main">
List
<ul class="submenu" style="display: none;">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.
So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs.
var main = document.getElementById("main");
main.onmouseover = function() {
document.querySelector('.submenu').classList.remove("displayNoneImp");
}
function closesSan() {
document.querySelector('.submenu').classList.add("displayNoneImp");
}
.submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
.displayNoneImp {
display: none !important;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:
var main = document.querySelector('#main');
var submenu = document.querySelector('.submenu');
var items = document.querySelectorAll('#main li');
main.addEventListener('mouseover', function () {
submenu.style.display = 'block';
});
main.addEventListener('mouseout', function () {
submenu.style.display = 'none';
});
items.forEach(function(item) {
item.addEventListener('click', function () {
console.log('clicked on:', item)
submenu.style.display = 'none';
});
});
.submenu {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li>Bacon</li>
<li>Tuna</li>
<li>Chicken</li>
</ul>
</li>
</ul>
When Using !important is The Right Choice
You can try something simple like this:
function closesSan() {
document.getElementsByClassName('submenu')[0].classList.add("hide");
setTimeout(function() {
document.getElementsByClassName('submenu')[0].classList.remove("hide");
},100)
}
#main .submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
#main .submenu.hide {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu" >
<li onclick="closesSan()" >Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
use visibility instead of display
visibility: hidden;
save those kittens
I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.
This is my index bit:
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
Menu<i class="fa fa-angle-down"></i>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>
This is my script:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.
Here this thing can be done using iframe which works well,
but as you suggested i have tried it. here is my code.
reference same as you gave before.
Now i am showing code here
use js in this manner:
<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>
and html code with "<div>" tag.
<ul id="tabs">
<li>TAb1</li>
<li>TAb2</li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>
i have also used jquery.min.js and blocjUI.js and css
css code is here
<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}
and you will get two different page in one page.
Scrren1:
screen2:
I am trying to resize a div when a user decides to hide (or show) particular content. For example, I have a contents page (https://jsfiddle.net/4b1g5jp9/1/), when a user clicks hide, I want the div to resize accordingly, hiding all contents except the actual Contents title.
Also, the 'Show' link should only show if the content is actually hidden and vice versa.
I have tried to adapt some JS based on a similar issue I found online and tried the following approach:
<script language="javascript">
function toggle() {
var ele = document.getElementById("contents-list");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
But the above achieves nothing. Any advice/solution would be appreciated.
By using the event's target we can determine what to show/hide.
If we do it that way, we can use this multiple times on a single page without it messing with each other.
Also, I've used toggle() which basically does the if() you had in your code statement for you.
https://jsfiddle.net/jkrielaars/qhb8ccob/1/
$(document).ready(function() {
$('.toggle').click( function(event) {
$(event.target).parents('.contents-list').find('ul').toggle();
var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
$(event.target).text(newText);
});
});
.contents-list{
width: 300px;
background-color: #f4f6f9;
padding: 15px;
border: 1px solid #b3b4b5;
}
.contents-list ul{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 14px;
}
#contents-list ul li{
text-decoration: none;
}
.contents-list ul li a{
padding-bottom: 2px;
text-decoration: none;
}
.contents-list a:visited {
text-decoration: none; color:blue;
}
.contents-list ul li a:hover{
text-decoration: underline;
}
.centerContents{
text-align: center;
}
.toggle{
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Use that structure as your HTML:
<div id="contents-list">
<ul>
<li id="centerContents"><b> Contents </b>
<a class="hideLinks" href="#">[Hide]</a>
<a class="showLinks" href="#">[Show]</a>
</li>
</ul>
<ul class="submenu">
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Using jQuery:
<script type="text/javascript">
$("#contents-list ul li a.hideLinks").click(function(){
$("ul.submenu").css("display", "none");
});
$("#contents-list ul li a.showLinks").click(function(){
$("ul.submenu").css("display", "block");
});
</script>
Your jQuery script should be right after the HTML, or near the </body> tag. And make sure to call jQuery cdn inside head tag: <script src="jquery-3.0.0.min.js" type="text/javascript"></script>.
NOTE: You can use Show() and Hide() functions instead of css display properties. You can read more about those functions Here.
onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>
Any help would be appreciated
You can try doing this only by CSS, for that you need to edit you Markup.
Check this demo
CSS
#appLinks_list ul {
position: absolute;
left: 0;
top:30px;
width: 60px;
list-style: none;
display: none;
}
#appLinks_list li:hover ul {
display: block;
background: #ccc
}
#appLinks_list li:hover {
background: #ccc
}
I have just added the minimum code for showing dropdown on :hover.
from what i understand, use code like this.replace the div id's with your div ids.
$( "#appLink_csrname" ).mouseover(function() {
$('#changepasswordDivId').show();
});
$( "#changepasswordDivId" ).click(function() {
$('#popup').show();// use facebox or fancy box code that you are using for popup here.
});
I think it's although fault in your html code, watch span and a tags
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname">eacuser
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
then
<script>
$(document).ready(function(){
$('.csrname').bind('mouseenter', function () {
$('.csrname', '#appLink_csrname').show()
}
$('.csrname').bind('mouseleave', function () {
$('.csrname', '#appLink_csrname').hide()
}
})
</script>
If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.
http://jamessuske.com/will/
I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.
This is my JavaScript:
<script type="text/javascript">
function showGalleryNav(){
document.getElementById('headerNavGallery').style.display = "";
}
function showInfoNav(){
document.getElementById('headerNavInfo').style.display = "";
}
function hideGalleryNav(){
document.getElementById('headerNavGallery').style.display = "none";
}
function hideInfoNav(){
document.getElementById('headerNavInfo').style.display = "none";
}
</script>
And The HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Info</li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li>William Ruppel</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div><!--headerNavInfo-->
I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with
$('#headerNavGallery").css("display", "");
also didn't work,
Any ideas would be greatly apperiated.
Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.
<ul class="menu">
<li>item 1</li>
<li>
item 2 with sub
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
... so on ..
</ul>
</li>
</ul>
some css
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 30px; /* the height of the root level item */
display: none;
}
.menu li li {
position: static; /* or you could float these for horizontal menu */
}
.menu li:hover ul {
display: block;
}
These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/
Check that typeo, nvm...
Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:
<script>
$(".galleryNavToggle").on("mouseenter mouseleave", function(event){
var headNavGal = $("#headerNavGallery");
if(event.type === "mouseenter"){
headNavGal.show();
}else if(event.type ==="mouseleave" &&
((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
$.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
headNavGal.hide();
}
});
$("#headerNavGallery").on("mouseleave", function(event){
var headNavGal = $(this);
if(event.type ==="mouseleave"){
headNavGal.hide();
}
});
</script>
HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
AND CSS
.headerNav{
border:thin solid black;
float:left;
}
.headerNavGallery{
float:left;
border:thin solid black;
margin-left:-1px;
}
1) Gallery
You don't need to specify javascript:. This is redundant.
2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.
3) You have code for "headerNavInfo" but no matching HTML.