This question is kind of puzzle, I know its not so easy, I would like to create new navigation link based on clicked li, for example
<nav id="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Tutorials</li>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Current Staff</li>
<li>Retired Staff</li>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Suppose If I click on "Home" I would like to create new nav bar like below
<nav id="nav_others">
<ul>
<li>Home</li>
</ul>
</nav>
Same way if I click on "Staff Profile"
<nav id="nav_others">
<ul>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
<ul>
</nav>
I don't know how many parent and children elements, my navigation element will have, if anyone here knows how to achieve this using jquery or javascript please share your solutions.
Thank You
Add the following div into your code(After nav-main):
<nav id="nav_others">
<ul></ul>
</nav>
And use the following Jquery:
<script>
$(document).ready(function(){
$('.main').click(function(e){
var val = $(this).text();
$('#nav_others ul').append('<li class="prev">'+val+'</li>');
e.preventDefault();
});
});
</script>
Related
I have a menu which I have working fine but I need a small change and that is I need the parent menu to toggle the submenu, currently if you click the parent menu the submenu appears but I need it so when you click the parent menu again it closes the sub menu.
You can see the menu in action here.
and this is the javascript that is for the menu:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});
This is the menu html
<nav class="main">
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Replace this code:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
With the code below:
$('.dropdown-toggle').click(function() {
var $currentDropdown = $(this).next('.dropdown');
$currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
$currentDropdown.siblings('.dropdown').not($currentDropdown).hide();
$currentDropdown.toggleClass('toggled');
$currentDropdown.toggle();
});
That should do it.
I think this is the simplier way :)
Hope you helped
$(".dropdown").css('display', 'none');
$('.dropdown-toggle').click(function(e) {
if ($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(".dropdown").hide();
$(this).next().show();
}
});
a {
display: block;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><nav class="main">
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
I think this code will be enough.
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle();
});
Codepen Example
This can be done easily with Bootstrap:
<li class="submenu">
<i class="la la-user"></i>
<span> Main menue </span>
<span class="menu-arrow"></span>
<ul style="display: none;">
<li>sub menu 1</li>
<li> sub menu 2 </li>
<li> sub menu 3 </li>
</ul>
</li>
I have a top menu with some items that have sub-items. If the user clicks on an item that has sub items, I want these sub-items to be displayed in the bottom menu, so that when one reaches the bottom of the page it is easy to continue to a another sub-item.
Example: If the user clicks on "First" it should look like below.
<nav id='top-menu'>
<ul>
<li>
<a href='#'>First</a>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</li>
<li>
<a href='#'>Second</a>
</li>
</ul>
</nav>
<article>
Article text
</article>
<nav id='bottom-menu'>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</nav>
<details>
<summary>Heading #1</summary>
<nav>
Link A
</nav>
</details>
<details>
<summary>Heading #1</summary>
<nav>
Link B
</nav>
</details>
with out jquery by using html5 we can do it,if you dont like comment i will update with jquery more..in fiddle
if you are using jQuery you can try something like this:
var $bottomContainer = $('#bottom-menu');
$('#top-menu a').on('click', function(e){
e.preventDefault();
var $submenu = $(e.target).siblings('ul');
if (!$submenu.length) return;
$bottomContainer.empty().append($submenu.clone());
});
I need to change link color to the button below the id #idTERRITORIAL_8 which has the class .active_default, the idIMMUNOLOGY_9, but I cannot use that directly. My starting point has to be #idTERRITORIAL_8.
I tried this :
$('#idTERRITORIAL_8').parent().find('.active_default').addClass("red");
But all .active_default changed color.
I also tried next and nextAll
<div id="wrapper">
<ul class="menu">
<li>Overview</li>
<li>Sales
<ul>
<li>National</li>
<li>Provincial</li>
<li>Regional
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Territorial
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Depot</li>
</ul></li>
<li>ICP</li>
</ul>
</div>
$('#idTERRITORIAL_8').next().find('.active_default').addClass("red");
Link to jsbin example:
https://jsbin.com/lenotolaco/1/edit?html,js,output
I have a responsive navigation on my website. And, this js code is for smooth scrolling within my webpage.
$(function(){$("a[href*=#]:not([href=#])").click(function() {
if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")
&&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$("[name="+this.hash.slice(1)+"]");
if(target.length){
$("html,body").animate({scrollTop:target.offset().top},1000);return false}}})});
When i create a link Scroll to Topwrapper, i can scroll it smoothly to the div as long as the div name is #topWrapper or #whatever. I have also an id name navi in my navigation. I would like to ask that, is there anyway i can disable the id in this js code so that it doesn't scroll when i click on the hamburger icon to open the menu? Thank you!
Hope you understand what i am asking as English is not my primary language. Thank you!
Update:
<nav class="menu" id="navi">
<ul>
<li class="has-sub-menu">About
<ul class="sub-menu">
<li>Our Vision</li>
<li>Our Services</li>
<li>Latest New</li>
<li>Our Blog</li>
</ul>
</li>
<li class="has-sub-menu">Gallery
<ul class="sub-menu">
<li class="has-sub-menu">Kitchen Cabinet
<ul class="sub-menu">
<li>Melamine ABS Kitchen Cabinet</li>
<li>Acrylic Door Kitchen Cabinet</li>
<li>3G Glass Door Kitchen Cabinet</li>
<li>4G Glass Door Kitchen Cabinet</li>
</ul>
</li>
<li class="has-sub-menu">Wardrobe Design
<ul class="sub-menu">
<li>Swing Door Wardrobe</li>
<li>Sliding Door Wardrobe</li>
<li>Walk In Closet</li>
</ul>
</li>
<li>TV Cabinet</li>
<li>Study Table Design</li>
<li>3D Cabinet Design</li>
<li>Others Cabinet Design</li>
</ul>
</li>
<li class="has-sub-menu">Materials
<ul class="sub-menu">
<li class="has-sub-menu">Doors
<ul>
<li>Melamine ABS Door</li>
<li>3G Glass Door</li>
<li>Acrylic Door</li>
<li>4G Glass Door</li>
<li>Membrane Pressed</li>
<li>Multi-Layer Ply Laminated</li>
</ul>
</li>
<li class="has-sub-menu">Carcass
<ul>
<li>Compressed Wood</li>
<li>Blockboard</li>
<li>Solid Wood</li>
<li>Aluminium</li>
</ul>
</li>
<li class="has-sub-menu">Worktop
<ul>
<li>HPL Worktop</li>
<li>Solid Surface</li>
<li>Granite Stone</li>
<li>Quartz Stone</li>
</ul>
</li>
</ul>
</li>
<li class="has-sub-menu">Promotion
<ul class="sub-menu">
<li>Kitchen Cabinet</li>
<li>Wardrobe</li>
<li>Appliances</li>
<li>Extended Promotion</li>
</ul>
</li>
<li class="has-sub-menu">Contact
<ul class="sub-menu">
<li>Contact Information</li>
<li>Enquiry Form</li>
<li>Meet Our Designers</li>
<li>Facebook</li>
<li>Twitter</li>
<li class="share">Whatsapp</li>
</ul>
</li>
</ul>
</nav>
Js Code for navigation:
$(document).ready(function(e){
var t=$("#navi"),a=$(".menu-link"),l=$(".has-sub-menu > a");
a.click(function(e){e.preventDefault(),a.toggleClass("active"),t.toggleClass("active")}),l.click(function(e){e.preventDefault();
var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")}),e.preventDefault()});
Do:
document.getElementById("desired-id-name").addEventListener('click', function(){
return false; // does nothing
});
EDIT 1:
Since you are using jQuery, here is a jQuery version:
$("#desired-id-name").click(function(){
return false;
});
Make sure to add this inside:
$(function(){ ... };
EDIT 2:
$("#desired-id-name").scroll(function(){
return false;
});
Docs: https://api.jquery.com/scroll/
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap), i've now run into a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated, i'm sure its just a simple overwriting syntax, but i can't be too sure, whether it's that or if it's a scripting problem.
Thank you.