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');
Related
I have the following nav menu.
If I click h1, t1, t2, t3 need to toggle (hide or show), other things stay as it is.
If I click h3, t6, t7, t8 need to toggle, other things stay.
Basically, h1, h2, h3 is the header and rest is children.
$(document).ready(function() {
/* In mobile menu, heading click, toggle sub */
$('.slicknav_nav li.heading').click(function() {
//$(this).find('ul').slideToggle();
$('.slicknav_nav li:not(.heading)').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="heading">h1</li>
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
<li class="heading">h2</li>
<li class="first">t4</li>
<li class="">t5</li>
<li class="heading">h3</li>
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</ul>
I have made some code. Obviously, it toggles other peer as well. Is it a way to only toggle the current item's "children"?
You can use nextUntil of jQuery method like below.
$(this).nextUntil(".heading").toggle();
Example:
$(document).ready(function() {
/* In mobile menu, heading click, toggle sub */
$('.slicknav_nav li.heading').click(function() {
$(this).nextUntil(".heading").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slicknav_nav">
<li class="heading">h1</li>
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
<li class="heading">h2</li>
<li class="first">t4</li>
<li class="">t5</li>
<li class="heading">h3</li>
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</ul>
One thought would be to wrap each heading group in a div, then wrap the children in another div inside that one. Could do something like this for layout:
<ul>
<div class="headingContainer">
<li class="heading">h1</li>
<div class="childContainer">
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
</div>
</div>
<div class="headingContainer">
<li class="heading">h2</li>
<div class="childContainer">
<li class="first">t4</li>
<li class="">t5</li>
</div>
</div>
<div class="headingContainer">
<li class="heading">h3</li>
<div class="childContainer">
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</div>
</div>
</ul>
Then, in your jQuery, you could use the .siblings() selector to select the sibling div in the dom. Run toggleClass("heading") on the selection and that should do the trick if I'm understanding this correctly.
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());
});
What I would like to happen: The first three list items in the nav bar should correspond to the first three content items in the content area. The three list items in the dropdown should correspond to the remaining three content items. Hovering over the dropdown icon should display the list but the dropdown icon shouldn't link to anywhere.
What's actually happening: The first three list items work properly and link to the first three content items. The dropdown box animates properly, but the items in it all link to the 4th content item. Clicking the dropdown box's icon also links to the 4th item.
Here is the code (A lot of the code is generated, so I grabbed the code from FireBug, which is why the "uk-active" classes and "aria-hidden" attributes are there):
<nav class="uk-navbar">
<ul class="uk-navbar-nav" data-uk-switcher="{connect:'#content-area'}">
<li class="uk-active" aria-expanded="true">
Dashboard
</li>
<li aria-expanded="false">
Summary
</li>
<li aria-expanded="false">
Details
</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown="" aria-expanded="false" aria-haspopup="true">
<a href="">
<i class="uk-icon-cog"></i>
</a>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="true" style="top: 40px; left: 0px;" tabindex="">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li>
Upgrade
</li>
<li>
Configure
</li>
<li>
Settings
</li>
</ul>
</div>
</li>
</ul>
</nav>
<ul id="content-area" class="uk-switcher">
<li id="content-dashboard" class="parent.uk-container uk-container-center uk-active" aria-hidden="false">...</li>
<li id="content-summary" aria-hidden="true">...</li>
<li id="content-details" aria-hidden="true">...</li>
<li id="content-upgrade" aria-hidden="true">...</li>
<li id="content-config" aria-hidden="true">...</li>
<li id="content-settings" aria-hidden="true">...</li>
</ul>
Basically, the "on click" event handler for the 4th content item is getting added to the "settings-btn-container" list item and no event handlers are getting added to the list items under the dropdown. I can't figure out how to get the event handlers to bind to the dropdown list items instead.
Try being more explicit to the UIkit Switcher component about what constitutes a "toggle".
In the snippet below, I've used these settings:
{
connect: '#content-area',
toggle: '.toggle-link'
}
The default value for toggle, in the UIkit Switcher component is >*, which you'll probably recognize as a selector for "the first immediate child element of any type". Since the links in your dropdown are not immediate descendants, no Switcher events were fired when they were clicked.
By broadening the "toggle" definition to all .toggle-link elements in the switcher, each of your links gets mapped to the corresponding <li> in the #content-area element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css'>
<nav class="uk-navbar">
<ul id="switcher-menu" class="uk-navbar-nav" data-uk-switcher="{connect: '#content-area', toggle: '.toggle-link'}">
<li class="uk-active toggle-link">Dashboard</li>
<li class="toggle-link">Summary</li>
<li class="toggle-link">Details</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown>
<i class="uk-icon-cog"></i>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li class="toggle-link">Upgrade</li>
<li class="toggle-link">Configure</li>
<li class="toggle-link">Settings</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="uk-container uk-container-center">
<ul id="content-area" class="uk-switcher">
<li class="uk-active">... (Dashboard)</li>
<li>... (Content Summary)</li>
<li>... (Content Details)</li>
<li>... (Content Upgrade)</li>
<li>... (Content Config)</li>
<li>... (Content Settings)</li>
</ul>
</div>
I am working on Drupal 8 website. In that i having a problem in assigning a active class to nav list elements.
I used the following code to set the active class, it is working for the same url.
The code look like this
<nav id="getnav">
<ul>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a>
</li>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a>
</li>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a>
</li>
</ul>
</nav>
I used jquery function to set the active class based on the url. Using the following code.
function setActive() {
var myurl =window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$("#getnav ul li a").each(function(){
if($(this).attr("href") == '/drupal/'+myurl )
$(this).addClass("active");
});
}
window.onload = setActive();
The real problem is whenever accessing the subpages like todo/page2 the active class is gone.
http://localhost/drupal/todo :::is working fine but after accessing subpage like
http://loclahost/drupal/todo/add
The class is gone.
Please give me suggestions regarding this problem.
I want to Set The Active class to all of the subpages too.after todo/*
You can do this using pure CSS. You need to add class/id to your body element and your nav li elements, and then you can define combinations of them in your css to be highlighted. For example, suppose this is your html:
< body id="todo_body">
<nav id="getnav">
<ul>
<li class="todo_dropdown">
<a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a>
</li>
<li class="files_dropdown">
<a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a>
</li>
<li class="photos_dropdown">
</body>
<a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a>
</li>
</ul>
</nav>
</body>
Now, you can use css like given below to apply highlighting styles to your 'should be active' li element:
#todo_body .todo_dropdown,
#files_body .files_dropdown,
#photos_body .photos_dropdown
{
background-color: red;
color: white;
/*Your css styles for active nav item will come here */
}
You can also add any styles to any elements contained in the should be active li element.
<ul class="nav">
<?php
$page_name = basename($_SERVER['PHP_SELF']);
?>
<!-- Main menu -->
<li class="<?php echo ($page_name=='dashboard.php')?'current':'';?>"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<li class="submenu <?php echo ($page_name=='welcome_note.php' || $page_name=='corporate_profile.php' || $page_name=='introduction_of_the_township.php' || $page_name=='location_map.php')?'current open':'';?>">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Masters
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li class="<?php echo ($page_name=='welcome_note.php')?'current':'';?>">Welcome Note</li>
<li class="<?php echo ($page_name=='corporate_profile.php')?'current':'';?>">Corporate Profile</li>
<li class="<?php echo ($page_name=='introduction_of_the_township.php')?'current':'';?>">The Township</li>
<li class="<?php echo ($page_name=='location_map.php')?'current':'';?>">Location Map</li>
</ul>
</li>
</ul>
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.