Problem with Display of jQuery Menu - javascript

Menu does not display in line. Not sure how to call the CSS code. Also I want the alert to tell me which menu item was clicked.
<script type="text/javascript">
function get_list() {
$("#tabs").click(function(){
$(this).click(function(){
alert(this);
});
});
</script>
<style type="text/css">
#navbarID li {
display: inline;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Type 1</li>
<li>Type 2</li>
<li>Type 3</li>
</ul>
</div>
</body>
</html>

the html should be something like this.
<ul id='tabs'>
<li><a href='type1.html'>Type 1</a></li>
<li><a href='type2.html'>Type 2</a></li>
<li><a href='type3.html'>Type 3</a></li>
<li><a href='type4.html'>Type 4</a></li>
</ul>
the css part could be this:
ul#tabs { list-style: none; }
ul#tabs li { display: inline; }
the onclick that you want on jQuery is like this:
$('ul#tabs li a').click(function(){ alert('i was clicked!'); return false; });

alert($(this).html()); will tell you what the contents of that nav item are.
Maybe you should use <span> instead of <div> for inline.

Related

facing problem in adding and removing class in ul and li tag

I am working on a app using Jquery I want to add class and remove class conditionally. In code below there is menu and submenu.
If the user clicks #two or #three (to open submenu), the submenu class is added to the ul tag containing #two and #three and the menu class is removed.
If the user clicks #three or #four (on li tag), the menu class is added to the ul tag containing #three and #four and the submenu class is removed from the ul containing #one and #two
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
if (!$(".left_pannel ul li ul").hasClass('submenu')) {
alert("test");
$(".left_pannel ul li").removeClass("iconadd");
} else {
$(".left_pannel ul li").addClass("iconadd");
}
});
</script>
<body>
<div class="left_pannel">
<ul>
<li>Matches
<ul id="one" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li>Quize Master
<ul id="two" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li id="#three">Excel Update</li>
<li id="#four">Application version</li>
</ul>
</div>
</body>
On click button find class that is subMenu , If class is there change class that is iconadd or not than remove iconadd
$(document).ready(function()
{
$(".left_pannel ul li ul").on("click",function()
{
if ($(this).hasClass('submenu'))
{
$(".left_pannel ul li").addClass("iconadd");
}
else
{
$(".left_pannel ul li").removeClass("iconadd");
}
});
});
Thanks,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".left_pannel ul li ul").click(function(){
if ($(this).hasClass('submenu')) {
$(".left_pannel ul li").addClass("iconadd");
} else {
$(".left_pannel ul li").removeClass("iconadd");
}
});
});
</script>
<body>
<div class="left_pannel">
<ul>
<li>Matches
<ul id="one" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li>Quize Master
<ul id="two" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li id="#three">Excel Update</li>
<li id="#four">Application version</li>
</ul>
</div>
</body>
try this code

onclick expand multiple menu

I want to make an onclick expand multiple menu in my website
Before I follow this thread: this with little bit modify I get:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul>
But it only shows a menu, then I create a duplicate like this:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul><ul>
<rg><li id="auctions2">Menu</li></rg>
<br></br>
<lf>
<li class="submenu2">Left</li>
</lf>
<rg>
<li class="submenu2">Right</li>
</rg>
</ul>
And JS and CSS like this:
<script>
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function(){
$('.submenu2').slideToggle();
});
});
</script>
<style>
.submenu{display:none;}
.submenu2{display:none;}
rg {float:right}
lf {float:left}
</style>
Its work but doesn't run inline. Then I useul {display:inline-block}
Yes, the menu running inline, but it's broken and float doesn't work properly. Can it's fixed? or can I make multiple menu in same <ul>?
make rg and lf as classes and change the html accordingly to get your desired style.
But I recommend, you should consider studying about ul and li tags and its properties before using it
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function() {
$('.submenu2').slideToggle();
});
});
ul {
display: block;
margin:0;
padding:0;
width:100%;
}
li {
list-style: none;
}
li.main {
width:100%;
text-align:right;
}
.submenu {
display: none;
}
.submenu2 {
display: none;
}
.rg {
float: right;
}
.lf {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li id="auctions" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu lf">Left</li>
<li class="submenu rg">Right</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li id="auctions2" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu2 lf">Left</li>
<li class="submenu2 rg">Right</li>
</ul>
</li>
</ul>
</li>
</ul>

Keep UL visible when hovering from div to UL

I've got a custom header / nav where I have two elements that represent two sections of a website. I want to be able to hover over one of the elements and display a particular menu. However the Menu list isn't a child of the element. So I can't do it with CSS.
The problem i'm having is when I hover over the element, the menu shows. But I move my mouse to hover over the menu and and as soon as move away from the element the menu disappears. I have tried adding a display:block to the manu items, with a .delay() method running but there is still a slight flicker when moving the mouse away from the div.
Here is my current code:
//HTML
<header>
<a class='hoverOverOne'>Hover over me to show menu</a>
<a class='hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing</li>
<li>testing</li>
</ul>
</nav>
</header>
// jQuery
jQuery("a.hoverOverOne").hover(
function () {
jQuery('#menuToShow-One').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-One').slideUp('medium').delay(500);
});
jQuery("a.country").hover(
function () {
jQuery('#menuToShow-Two').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-Two').slideUp('medium').delay(500);
});
// CSS
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
Any help would be much appreciated.
Thanks.
$(function(){
$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
var menu = '#menu'+this.id;
$('.menu').not(menu).slideUp(0);
$(menu).slideDown('medium');
});
$("ul.menu").mouseleave(function () {
$(this).slideUp('medium');
});
});
a.hoverOverOne{
margin-right: 20px;
}
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
nav{
display:inline-block;
}
ul li{
display:block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
<nav>
<ul id='menuToShow-One' class="menu">
<li>testing menu 1</li>
<li>testing menu 1</li>
</ul>
<ul id='menuToShow-Two' class="menu">
<li>testing menu 2</li>
<li>testing menu 2</li>
</ul>
</nav>
</header>
Check the following solution. No need for JS to power this one.
#hover-one:hover ~ nav ul#menuToShow-One,
#hover-two:hover ~ nav ul#menuToShow-Two {
max-height: 500px;
transition: 0.2s;
}
#menuToShow-One,
#menuToShow-Two {
max-height: 0;
transition: 0.2s;
transition-delay: 1s;
overflow: hidden;
}
nav:hover #menuToShow-One,
nav:hover #menuToShow-Two {
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a>
<a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing 1</li>
<li>testing 1</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing 2</li>
<li>testing 2</li>
</ul>
</nav>
</header>

JS using onclick event on li to display block

HTML:
<script>function dropdown()
{ console.getElementById("").style.display="block";
}</script>
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
Css:
#dropdown ul{
display: block;
}
#dropdown ul li {
display: block;
background-color: #558c89;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover > ul { /*this is what the onclick event should do*/
display: block;
}
The onclick should start the function "dropdown()" which needs to: "display: block;" on #dropdown ul li
You're missing the list ID and you're calling the selector on the console (when you want to be selecting on the document).
<script>
function dropdown()
{
document.getElementById("Menuitems").style.display="block";
}
</script>
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
JSFiddle: http://jsfiddle.net/tmaB9/
Try:
<li onClick="dropDown(this);">
This is important, so your function knows which element you clicked on. Then...
function dropDown(li) {
var submenu = li.getElementsByTagName('ul')[0];
if( submenu) {
submenu.style.display = submenu.style.display == "block" ? "" : "block";
}
}
This will toggle the visibility of the submenu :)
here is a quick example of what i think you want (provided you can use JQuery):
$(document).ready(function () {
$('#dropdown ul li').on('click', function dropdown() {
//console.getElementById("").style.display = "block";
});
});
<div id="dropdown" class="dropdown">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>

what is wrong with this jquery drop down

I have trying to create this jquery dropdown, but it doesn't work, Does anybody know If I am missing something in jquery or CSS
<style type="text/css">
body{padding:0px;margin:0px;}
ul li{list-style-type:none;}
#cssdropdown{padding:0px;margin:0px;}
a{text-decoration:none;padding:0px;margin:0px;}
.headLink{ display: inline-block; padding:10px;margin:10px;text-align:right;background-color:#999999;cursor:pointer;}
.headLink ul{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
$('ul',this).css("display","none");
})
})
</script>
<ul id="cssdropdown">
<li class="headLink">Home
<ul>
<li>Home1</li>
<li>Home4</li>
<li>Home2</li>
<li>Home3</li>
<li>Home5</li>
</ul>
</li>
<li class="headLink">About
<ul>
<li>About1</li>
<li>About2</li>
<li>About</li>
<li>About3</li>
<li>About5</li>
</ul>
</li>
<li class="headLink">Contact
<ul>
<li>Contact1</li>
<li>Contact2</li>
<li>Contact3</li>
<li>Contact4</li>
<li>Contact5</li>
</ul>
</li>
<li class="headLink">Links
<ul>
<li>Links1</li>
<li>Links2</li>
<li>Links3</li>
<li>Links4</li>
<li>Links5</li>
</ul>
</li>
</ul>
I am also not sure how this works with ul as a parameter. for function inside jquery
Thanks
For starters you are showing and hiding the ul on hover.
Change
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
$('ul',this).css("display","none");
})
})
To
$(function() {
$(".headLink").hover(function() {
$('ul',this).css("display","block");
}, function(){
$('ul',this).css("display","none");
})
})
Demo
There's a way to do this with pure CSS.
Remove the <script> tag, and replace your styles with these.
No change to the HTML structure.
<style>
*{padding:0;margin:0}
ul{list-style:none}
a{text-decoration:none}
a:hover{color:red}
.headLink{float:left;height:30px;line-height:30px;padding:0 10px;cursor:pointer}
.headLink ul{display:none;position:absolute}
.headLink:hover ul{display:block}
</style>

Categories