I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1
And the below content to work as a simple css menu bar.
<div class="menu_div">
<ul>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
CSS styling is
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.
I'm using django framework.
Try this jQuery code, it will add the class automatically
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
In your CSS you have a class with the id 'active', this should probably be a class like this:
.menu_div ul li.active
{
background:blue;
}
Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.
Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this:
<li class="active"> l1c1 </li>
Replace your id #active to class .active - that is more right way:
.menu_div ul li.active
{
background:blue;
}
and add this class to active element in your list:
<div class="menu_div">
<ul>
<li class="active"> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
.menu_div ul li#active
It says the active link needs an id of active. I see no id, hence why it is not blue.
If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.
Just
css
.menu_div ul li.active{background:blue}
html
<div class="menu_div">
<ul>
<li id="page1"> l1c1 </li>
<li id="page2"> l1c1 </li>
<li id="page3"> l1c1 </li>
<li id="page4"> l1c1 </li>
</ul>
</div>
script
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>
Related
I designed a menu for WordPress as follows:
HTML:
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
CSS:
.menu > ul > li > ul {
display: none;
}
And using this script code, I have defined a condition that by clicking on li, if there is ul in it, it will be displayed:
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
This code works fine; But when several other li are used inside the li, the condition I put will no longer work and only the first sub-menu will be displayed.
Is there a way to make my script code work properly?
My problem is only related to the script code.
If you want to just have the 2nd level of the menu visible after opening, you need to do your CSS like this:
.menu > ul > li > ul {
display: none;
}
This way you will be selecting direct children of the elemen, more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
However, if you also want for the 2nd level of menu to be open on click, you need to move your <ul> and put it directly with your <li>, like this:
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</aside>
and change your CSS to this:
.menu ul > li > ul {
display: none;
}
You should move the ul content you want to be toggleable into the clickable li:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.menu ul li ul {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script >
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
</script>
</html>
I wanted to make current selected menu highlighted using jquery
Following is my jquery code
$('ul li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
Meeting Overview
Meeting Details
</div>
</ul>
Please help
$('ul li a').click(function() {
//$('li').removeClass();
//$(this).parent().addClass('active');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<li> Meeting Overview </li>
<li> Meeting Details </li>
</div>
</ul>
If you are trying to make sub menu use this
$(document).ready(function(){
if (localStorage.getItem('current_page')) {
var page = localStorage.getItem('current_page');
$('ul li').removeClass('active');
$('ul li[data-page="'+page+'"]').addClass('active');
}
});
$('ul li > a').click(function() {
$('li').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).parent().attr('data-page');
localStorage.setItem('current_page', page);
});
In your code, $(this).parent() is your <li> element only when you click your first link, links under dropdown-content div have not an <li> parent, so, the removeClass() function is not working as you expected.
Please, changethis and tell us if your code works as you expect.
Try this
$('ul li a').click(function() {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
ul li{
list-style-type:none;
float:left;
display:inline-block;
margin:0 10px;
padding:5px;
}
ul li.active{
background:pink;
}
li a{
text-decoration:none;
outline:0;
}
ul li.active a{
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>
This can´t work as expected. The problem is, you click the link () the current li elemet gets the class "active" and then the page refreshes because the link redirects you, which removes the active class from the current li element.
What you can do is teh following:
Option 1: Get the current path from the url
When the page gets loaded, you can extract the path and add the active class to the li that contains the link:
$(document).ready(function() {
var currentPath = window.location.pathname;
$('a[href="'+currentPath+'"]').partent().addClass("active");
});
This will find the link with the currentPath and add the class active to the corresponding li element.
You also need to wrap all links in separate list-elements:
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<ul>
<li>Meeting Overview</li>
<li>Meeting Details</li>
</ul>
</div>
</li>
</ul>
Option 2: Add the active link name as Query Param
You can append a query param to your links like this:
<li class="link home">
Meeting Overview
</li>
<li class="link usermeetings">
Meeting Details
</li>
In your javascript you can then get the page param and add the active class like this:
$(document).ready(function() {
var page = $.url().param('page');
$('.link').find('.' + page).addClass('active');
});
I have this sample:
link
CODE HTML:
<div class="menu">
<ul>
<li>Link1
<li>Link2
<ul>
<li>Home Link 1 Link 1</li>
<li>Home Link 1 Link 2</li>
<li>Home Link 1 Link 3</li>
</ul>
</li>
</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CODE CSS:
ul{
list-style-type:none;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.active{
border-left:2px solid red;
}
CODE JS:
$('.menu li ').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
My problem is following
If a user click for example on the element 4 and page reload,element 4 not have border-left
In the above example this works because everything is dinamic..dar imagine what would happen when opening a new HTML page...then the menu item that was clicked not have border-left.
How can I solve this problem?
Thanks in advance!
You cant show a menu bar or infact anything if the whole page is getting reloaded. But you can use AJAX calls for it. It will reload or update only a part of the page so that the menu remains as it is.
Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child,
So if i select a group all the parent & child in the group should have be moved with the group,So help me....
Here is my example code
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var me = jQuery || $.noConflict();
me(document).ready(function() {
if((me('ul li ul li ul li').children().length) == 0 ) {
me('ul li ul li ul li').addClass("list");
}
me('ul li ul li').click(function() {
me('ul li ul li').removeClass("list_state");
if((me(this).children().length) > 0 ) {
me(this).addClass("list_state");
me('.list_state').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
}
});
me('li.list').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
});
</script>
<ul>
<li id="level-0">India
<ul>
<li id="level-0-3">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1">United Kingdom
<ul>
<li id="london">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option
I have attached an example screenshot below..
Check this fiddle
In the above fiddle only the text within clicked li and its successor li's will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par" to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}
I've found an issue I just can't seem to solve.
I've got a navigation, 5 links in total. One of the links has a dropdown menu when you hover over it showing 3 more links.
Fine when a mouse is involved. But when you start using touch devices, the parent link consumes all gestures and taps, and the viewer is shown the dropdown for a fraction of a second before being taken to the parent's link page.
I'm wondering if there's a way of making it so the first touch of the parent link shows the dropdown menu, then a second touch would go to that link. touching anything else would just hide the dropdown.
<ul id="main-menu">
<li>Link</li>
<li>Link</li>
<li>Link
<ul class="sub-menu">
<li>Sub Link</li>
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
Anyone have any ideas? jQuery would be ideal
Something like this perhaps? You may want to customize the behavior of the dropdown, but this shows the basic logic of handling the click events and preventing default behaviour (i.e. following links) if the menu isn't open:
$(function() {
$('#main-menu a').click(function(e) {
var listItem = $(this).closest('li');
if (!listItem.is('.open')) {
// Opening drop-down logic here. e.g. adding 'open' class to <li>
e.preventDefault();
listItem.addClass('open');
}
// Otherwise the default behaviour of the event (clicking the link) will be unaffected
});
});
i have done complete bins for above issue also placed demo link here.
Demo: http://codebins.com/bin/4ldqp72
HTML
<ul id="main-menu">
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
<ul class="sub-menu">
<li>
<a href="#">
Sub Link
</a>
</li>
<li>
<a href="#">
Sub Link
</a>
</li>
<li>
<a href="#">
Sub Link
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
</li>
</ul>
JQuery
$(function() {
$('ul a').click(function(e) {
$('#main-menu li').removeClass('open');
e.preventDefault();
$(this).closest('li').addClass("open");
var pos = $(this).closest('li.open').offset();
$(this).closest('li.open').find("ul.sub-menu").css('top', pos.top + 'px');
});
});
CSS
#main-menu{
list-style:none;
margin:2px;
padding:2px;
}
li{
border:1px solid #333;
background:#ebcdff;
text-align:center;
width:100px;
}
li:hover{
background:#abcdfd;
}
li:hover a{
color:#ff3322;
}
li a{
text-decoration:none;
color:#2466ff;
}
li.open {
background:#abcdfd;
}
li.open a{
text-decoration:none;
color:#ff3322;
}
ul.sub-menu{
list-style:none;
display:none;
}
li.open > ul{
position:absolute;
left:70px;
display:block;
}
Demo: http://codebins.com/bin/4ldqp72