using jquery to create navigation system - javascript

I am trying to create a menu system where when a list anchor is clicked, a div below the ul list is shown. but the system is not working and i can't control if the user is over the displayed div.
Here below is the code where
I created UL list to create tabs
I created DIVs as pages to be displayed
I created jquery mouseenter event to display the div with same class as of the link's ID
I used mouseleave function to hide the displayed div.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; display:inline; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear:both; position:absolute; }
.tab_pages div{display:none;width:200px; height:200px; background- color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseenter(function(e) {
var tid=this.id;
$(".tab_pages div").hide();
$(".tab_pages ."+tid).show();
});
$(".tabs_button a").mouseleave(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).hide();
});
});
</script>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
Here the main part i am having problem is to keep div showing if the user is hovering over the div.
Edit: Fiddle

I have created complete code bin for above issue on http://codebins.com/bin/4ldqpam
So, Try on it.
To Solve this follow below steps:
1) Include latest jQuery.js javascript file on html header tag first.
2) HTML (Little bit Changes)
<div class="tabs_button">
<ul>
<li id="page1">
<a href="#">
Cars
</a>
</li>
<li id="page2">
<a href="#">
Price & Offers
</a>
</li>
<li id="page3">
<a href="#">
Chevy Experience
</a>
</li>
<li id="page4">
<a href="#">
Service
</a>
</li>
<li id="page5">
<a href="#">
Contact Us
</a>
</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
3) CSS (Add Few More Styles):
body{
background-color:#000;
}
.tabs_button{
width:950px;
}
.tabs_button ul {
list-style:none;
margin:0px;
padding:0px;
}
.tabs_button ul li {
width:120px;
float:left;
display:inline;
margin-left:10px;
margin-right:10px;
text-align:center:
}
.tabs_button ul li:hover a{
color:#FFC222;
}
.tabs_button ul li:hover{
background-color:#445566;
}
.tabs_button ul li a{
color:#FFF;
text-decoration:none;
}
.tabs_button ul li a:hover{
color:#FFC222;
}
.tabs_button ul li.selected a{
color:#FFC222;
}
.tabs_button ul li.selected{
background-color:#445566;
}
.tab_pages{
clear:both;
position:absolute;
}
.tab_pages div{
display:none;
width:120px;
height:200px;
color:#fff;
background-color:#445566;
margin-top:27px;
position:absolute;
}
4) JQuery for Menu Navigation:
$(".tabs_button li,.tab_pages div").mouseenter(function() {
var className = $(this).attr('id');
$(".tabs_button #" + className).removeClass("selected");
if (typeof(className) == "undefined" || className == null) {
className = $(this).attr('class');
$(".tabs_button li").removeClass("selected");
$(".tabs_button #" + className).addClass("selected");
}
$(".tab_pages div").hide();
var offset = $(".tabs_button li#" + className).offset();
$(".tab_pages ." + className).css({
'left': offset.left - 8
});
$(".tab_pages ." + className).show();
});

Try using the mousover event instead, like:
$(".tabs_button a,.tab_pages").mouseover(function() {
});

Remove the (".tab_pages div").hide(); from your mouseenter() event. Also, in the .tab_pages style, change position:absolute to float:left. If you were to use absolute positioning, you would need to specify either a top or bottom position and a left or right position, for example - top:0px; left:0px. But since you are specifying a top-margin of 30px, use float - absolutely positioned divs cannot have margins added to them. Lastly, in your .tabs_button ul li style, the display:inline does not do anything - calling float:left changes the li to a block element - which is what you want. I have copied the code with the changes below - should work for you.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear: both; float: left; }
.tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseover(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().show();
});
$(".tabs_button a").mouseout(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().hide();
});
});
</script>
<body>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>

Related

Menu drop down JQuery

Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).
$(document).ready(function(){
let list = $('ul li');
let mega = $('.megamenu');
list.click(function(e){
e.preventDefault();
mega.slideDown(400);
if((e.target) == list){
mega.slideUp(400);
}
})
});
li{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.megamenu{
background:green;
padding:5rem;
color:white;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Page 1
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
<li>Page 2
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
Could you change like this for click to li to dropdown and click li slideup again
$(document).ready(function(){
let list = $('.menu');
let mega = $('.submenu');
list.click(function(e){
e.preventDefault();
var menuDisplay = mega.css('display');
if(menuDisplay == 'block') {
mega.slideUp(400);
} else {
mega.slideDown(400);
}
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class='menu'>Page 1
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
<li class='menu'>Page 2
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
CSS
.menu{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.submenu{
background:green;
padding:5rem;
color:white;
display:none;
}
And click Page1 or Page2 to see slideUp and slideDown

i want to change the "margin-left" of a ul element when i click on an image

<html>
<ul>
<li>Blocks</li>
<li>Tools</li>
<li>Weapons</li>
<li>Armour</li>
<li>Mobs</li>
<li>Food</li>
</ul>
<img onclick="SomeJavaScriptCode" src="button.png">
</html>
Above is a simple naviagtion bar and an image with and incomplete onclick function.
<style>
ul
{
list-style-type:none;
margin:auto;
padding:0;
float: left;
height:10%;
width:10%;
margin-left: -999px;
}
</style>
Above you can see i moved the UL of the page so i does not effect the rest of my code.
How can i make it so that when the button is clicked on the "margin-left: -999px;" changes to "margin-left: 0px;" or any other value.
This should work:
<ul id="myul">
...
</ul>
<img onclick="changeMargin()" src="button.png">
<script>
function changeMargin ()
{
document.getElementById("myul").style.marginLeft="0px";
}
</script>
or the jQuery way
<ul id="myul">
...
</ul>
<img id="img" src="button.png">
<script>
$(function() {
$('#img').click(function(){
$('#myul').css('marginLeft','0px')
})
});
</script>

Child ul not showing when parent ul set with overflow hidden

HTML
<div id="gadget">
<span id="nav_up">UP</span>
<ul>
<li>LIST1
<ul>
<li>Child1.1</li>
<li>Child1.2</li>
</ul>
</li>
<li>LIST2
<ul>
<li>>Child2.1</li>
</ul>
</li>
<li>LIST3
<ul>
<li>>Child3.1</li>
</ul>
</li>
</ul>
<span id="nav_down">Down</span>
</div>
CSS
#gadget{width:75px; height: 100%;}
#gadget ul{height:450px; width:100%; overflow:hidden;}
#gadget ul li ul{display:none;}
#gadget ul li:hover ul{display:block;}
JS
$('#nav_down').click(
function () {
$('#gadget ul').animate({scrollTop: '100px'}, 800);
}
);
$('#nav_up').click(
function () {
$('#gadget ul').animate({scrollTop: '0px'}, 800);
}
);
Here on click <span> up and down the gadget <ul> moves up and down according to the overflow.
But when overflow:hidden is applied the child <ul> is not showing. And when I remove it child <ul> shows but the <span> scroll dosenot work. How can i solve this?
I believe the problem is all of your ULs are height:450px, would applying the height to only the top element solve the problems?
#gadget > ul{height:450px; width:100%; overflow:hidden;}
Your nested ul needs to be absolutely positioned and for proper scrolling grab the body element and apply the animate method http://jsfiddle.net/PJ3gp/
#gadget ul li ul{display:none;position:absolute;}
Add position:absolute to child elements

link to div in a separate tab

I am trying to link to a div that is in a separate tab. Currently the side navigation link is like this:
var loc = window.location.hash;
if (loc == "#bargain") {
jQuery('.tab-2').click();
App.SetBaseLine();
jQuery('#bargain').addClass('activeListColor');
};
<li>Bargain Packages</li>
<!-- start of tabHolder -->
<div id="tabHolder">
<ul class="tabs_new buttons">
<li class="liOuter" id="tab1">Buyers' Guide</li>
<li class="liInner" id="tab2">Pricing Guide</li>
</ul>
Unfortunately, this does not take me under the second tab. I am trying to have a user click the link, and it opens the tab and anchors down to the div location.
I am open to suggestions.
You can do this way:
<ul class="tab">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="tabs">
<div id="tab1">Content 1</div>
<div id="tab2">Something here</div>
<div id="tab3">Omg! Three</div>
</div>
And the script as:
$(document).ready(function(){
$(".tab > li > a").click(function(){
var tab = $(this).attr('href');
$(".tab > li > a").removeAttr("style");
$(this).css("background-color", "#ccc");
$('.tabs > div:visible').hide(function(){
$(tab).show();
});
return false;
});
$('.tabs > div').hide();
$('.tabs > div:first-child').show();
});
CSS:
body {overflow: hidden;}
ul li {display: inline-block; *display: inline; *zoom: 1;}
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;}
div {padding: 5px;}
Fiddle! Hope this is a best way to use tabs. :)
You can use the following jQuery to achieve a 'tab' like effect
​$('a').click(function() {
$('div').hide();
var destination = '#' + $(this).attr('data-tab');
$(destination).toggle();
});​
See this live example
Here is an updated example with the divs wrapped in an unordered list
Alternatively, you can use a 'current' class and toggle that on click using the following code:
$('a').click(function() {
$('.tabs div').removeClass('current');
var destination = '#' + $(this).attr('data-tab');
$(destination).toggleClass('current');
});​
Another live example here

How to make sub links appear when mouse upon a link

I have placed my code in http://jsfiddle.net/ChvjL/4/
While the mouse pointer is upon Link1 then the sub links link1a, link1b, link1c should appear.
Similarly for Link2 also.
Can anyone help me in resolving this
Thanks in advance
Amith
Here is an idea how it should be in your case:
html
<ul>
<li>Link1
<ul>
<li>Link1a</li>
<li>Link1b</li>
<li>Link1c</li>
</ul>
</li>
<li>Link2
<ul>
<li>Link2a</li>
<li>Link2b</li>
<li>Link2c</li>
</ul>
</li>
</ul>
Css
ul > li { width:100px; float:left; }
ul > li > ul { display:none; }
ul > li:hover > ul { display:block; }
ul > li > ul { padding-left:10px; }
Code http://jsfiddle.net/ChvjL/10/
Are you trying to say that when a person hovers at the link given, another link will be shown?
You can refer to this example. It's similar. You just need change the content:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Categories

Resources