okay so i have a Nav bar, and now i want to make it when it loads the page, it builds the nav bar
<div id="nav">
<div id="nav_holder">
<ul>
<li class="first"> Home </li>
<li>Rules </li>
<ul class="drop">
<li>Help
<ul class="drop">
<li>Beginnen</li>
<li>Geld Verdienen</li>
<li>Protection Blocks</li>
<li>Trade Signs</li>
<li>Sign beveiliging</li>
<li>Item ID List</li>
</ul>
</li>
</ul></li>
<li>Donate </li>
<ul class="drop">
<li>Staff
<ul class="drop">
<li>Faircraft team</li>
<li>Solliciteren</li>
</ul>
</li>
</ul></li>
<li>Videos </li>
<li></li>
<li>Forum </li>
</ul>
<ul class="right">
<li class="first">Sign Up! </li>
</ul>
</div>
</div>
so i think i need this code
function holder()
{ // check if adding 1 exceeds number of pics in array
var build='<img border="0" src="'+picArray[picCount]+'" width="649">\n';
document.getElementById("nav_holder").innerHTML=build;
}
}
but then i need it to make the nav bar,
btw i need help with the body onload feature too:p, please help
Instead of window.onload, try using jQuery http://jquery.com/:
$(document).ready(function(){
// build menu
)};
this will execute when the DOM finishes loading.
Related
I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
I am stick in responsive design which i am doing in laravel. The below code works in a normal view but in the nav bar is hidden in a mobile view. I checked with the javascript function but cannot troubleshoot the problem.
This is my html code
<div class="container">
<nav>
<ul>
<li class="active">Home </li>
<li>Our School
<ul>
<li>Key Features</li>
<li>Infrastructure</li>
<li>Fee System</li>
<li>Commitment & Objectives</li>
<li>Rules & Regulations</li>
<li>Hostel Management</li>
</ul>
</li>
<li>Our Facilities </li>
<li>News & Events </li>
<li>Photo Gallery </li>
<li>Student Zone </li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Mobile Menu Area Start -->
<div class="mobile-menu-area" style="display:none">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="mobile-menu">
<nav id="dopdown">
<ul>
<li>Home
<li>Our School
<ul>
<li>Key Features</li>
<li>Infrastructure</li>
<li>Fee System</li>
<li>Commitment & Objectives</li>
<li>Rules & Regulations</li>
<li>Hostel Management</li>
</ul>
</li>
<li>Our Facilities </li>
<li>News & Events </li>
<li>Photo Gallery </li>
<li>Downloads </li>
<li>Student Zone </li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
js code
$('nav#dropdown').meanmenu({siteLogo: "<a href='{{asset('client/home')}}' class='logo-mobile-menu'><img src='images/logo.png' alt='unable' /></a>"});
new WOW().init();
$.scrollUp({
scrollText: '<i class="fa fa-arrow-up"></i>',
easingType: 'linear',
scrollSpeed: 900,
animation: 'fade'
});
In the mobile view it doesn't show the header file.
The id which you gave in <nav id ='dopdown'> and which you are using in js function $(;nav#dropdown) is different.Tt may be the cause of your problem. Plese try this once.
I'm working on a navigation with 3 levels and want use toggle to expand and close those levels. I got it to work with the second level but am struggling with the third level.
I want the third level(purpose1,purpose2) to open when the second level(Purpose) is clicked.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li>Purpose</li>
</ul>
<ul>
<li>purpose1</li>
<li>purpose2/li>
</ul>
</li>
</ul>
Javascript:
$('li.dropdown').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
$('ul.products').click(function() {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
I've created a fiddle to illustrate the issue. The actual navigation is much more complex but this should do the job. Any suggestiones are really appreciated!
Your html is wrong. If the third lvl is to be displayed by clicking "purpose" it shoudl look like this:
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li >Purpose
<ul >
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
</ul>
</li>
Then just add a class to this thrid lvl list parent and add the jquery fucntion.
clicking in the product li is propagating up to the top level, which is causing the close.
$('ul.products').click(function(e) {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
e.stopPropagation();
});
.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose
<ul>
<li>purpose1</li>
<li>purpose2</li>
</ul>
</li>
</ul>
</li>
</ul>
here is the simplified working version, first move you 3rd level ul inside the li
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose</li>
</ul>
</li>
</ul>
and here goes the jQuery snippet -
$('li.dropdown a').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).parent('li').find('ul').toggle();
});
$('li.dropdown ul li').click(function() {
$(this).find('ul').toggle();
});
Check the working fiddle
I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>
This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO
With reference to the following page:
http://www.myorange.ca/theme/jarvisadmin/
Upon page loading, all of the accordions on the left momentarily unfold and then hide again. How can I stop this momentary unfolding as the page is loading?
Give all of the non open LI's that are suppose to be closed a class of closed
change your navigation html
add class="closed" in main li on which menu open
like
<ul class="menu" id="accordion-menu-js">
<li class="closed"><a href="javascript:void(0)"><i class="icon-off"></i>Dashboard <span
class="badge">2</span></a>
<ul>
<li>Dashboard </li>
<li>Logout
</li>
</ul>
</li>
<li class="closed"><a href="inbox.html" class="expanded"><i class="icon-envelope"></i>
Inbox</a> </li>
<li class=""><i class="icon-check"></i>Forms<span class="badge">3</span>
<ul>
<li>Form Elements </li>
<li>Validation </li>
<li>Wizards </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-user"></i>Interface<span
class="badge">3</span></a>
<ul>
<li>Interface Elements </li>
<li>Buttons & Icons </li>
<li>Tables </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-signal"></i>Charts &
Graphs<span class="badge">3</span></a>
<ul>
<li>Basic Charts </li>
<li>Advanced Charts </li>
<li>Raphael Engine </li>
</ul>
</li>
<li class="closed"><i class="icon-refresh"></i>Smart Widgets
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-plus"></i>Bonus<span
class="badge">4</span></a>
<ul>
<li>Invoice </li>
<li>Typography </li>
<li>Chat </li>
<li>Error Page </li>
</ul>
</li>
</ul>