How to display active top menu sub-items on bottom of page? - javascript

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());
});

Related

Change content from menu

I have different titles on my left menu and I want to change the text by clicking per each title, Please let me know what function should I write on javascript and which Html tags should I use.
Here is My Titles Html script:
<div class="widget">
<ul class="feature-list">
<li>Транспорт на свадьбу</li>
<li>Развозка персонала</li>
<li>Туризм</li>
<li>Ретроавтомобили</li>
<li>Бизнес-поездки</li>
<li>Экскурсии</li>
</ul>
</div>

I believe if you would like to change the tags to be changed onclick you should add the tags You will need to change the http request to your requested link
<div class="menu">
<div id="nav">
<ul>
<li>
<font color="#000">ЛЕГКОВЫЕ АВТОМОБИЛИ</font>
</li>
<li>
ЛИМУЗИНЫ
</li>
<li>
МИКРОАВТОБУСЫ (4-20 МЕСТ)
</li>
<li>
АВТОБУСЫ (25-30 МЕСТ)
</li>
<li>
АВТОБУСЫ (45-50 МЕСТ
</li>
</ul>
</div>
</div>
Does this answer your question?

How to create new navigation bar from clicked li using jquery

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>

How to reach the next li a from a specific point

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

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

When click on menu item, change the body style

We need to do so that when you click on the main menu items, changed both style BODY, by default (body class = "front") front, but when you click on the menu, design, class will not front but work, when you click on the menu pretul (body class = "pret"), etc.
<jdoc:include type="modules" name="limbi" />
<h1 id="site-name">web site</h1>
<nav>
<!--
THIS MENU
-->
<ul class="main-nav" >
<li class="careers"><span class="menu-item-title">HOME</span>
</li>
<li class="work"><span class="menu-item-title">DESIGN</span>
</li>
<li class="pret"><span class="menu-item-title">Pretul</span>
</li>
<li class="promovare"><span class="menu-item- title">Promovare</span>
</li>
<li class="port"><span class="menu-item-title">Portofoliu</span>
</li>
<li class="contact"><span class="menu-item-title">Contacte</span>
</li>
</ul>
</nav>
</header>

If you want to change a class name of elements, you can use these Jquery methods.
http://api.jquery.com/removeClass/
http://api.jquery.com/addClass/
var body = $('body');
body.removeClass('front').addClass('design');

Categories

Resources