I am using laravel and when the page is refresh the active item on sidebar is not selected, this : li class="{{ (request()->is('admin/cities*')) ? 'active' : '' }}"> (is a easy solution), but not looks great. How i can make this using jquery or other?
$(document).ready(function() {
$('ul li a').click(function() {
$('li a').removeClass("active");
$(this).addClass("active");
});
});
<style>.sidebar-link.active,
.sidebar-link:focus {
background: #e2e8ed;
color: grey !important;
text-decoration: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar py-3">
<ul class="sidebar-menu list-unstyled">
<li class="sidebar-list-item"><a href="/test" class="sidebar-link text-
muted active"><i class="la la-dashboard mr-3 text-gray "></i>
<span>Dashboard</span></a>
</li>
<li class="sidebar-list-item"><a href="/test2" class="sidebar-link text-
muted"><i class="la la-dashboard mr-3 text-gray "></i>
<span>Test</span></a>
</li>
<ul>
</div>
Related
I am trying to add active styling to the clicked link in the navbar and navigate to another page. But whenever I click on a link, it loads the page but resets the style of navbar. I tried using e.preventDefault, but it only ends up stopping the other pages to load but allows the style to show up on the nav bar. WheBelow are the code snippets
(function (window, document, $, undefined) {
"use strict";
$(document).ready(function () {
$(".c-header-1.-bg-white .c-header-1-nav > ul > li > a").click(function (
e
) {
$(
".c-header-1.-bg-white .c-header-1-nav > ul > li > a.active"
).removeClass("active");
// var $parent = $(this).parent();
$(this).addClass("active");
e.preventDefault();
});
});
})(window, document, jQuery);
/* Enter your custom styles */
#media (min-width: 992px) {
.c-header-1.-bg-white .c-header-1-nav > ul > li > a.active {
color: #0c2840;
}
.c-header-1.-bg-white .c-header-1-nav > ul > li > a.active:before {
background-color: #0c2840;
visibility: visible;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="c-header-1 -bg-white -js-header">
<div class="c-header-1-spacer"></div>
<div class="c-header-1-container">
<div class="c-header-1-inner">
<div class="c-container">
<div class="c-header-1-middle">
<div class="c-header-1-logo">
<img src="assets/img/logo.png" alt="Victoria Property Management Logo">
</div>
<nav class="c-header-1-nav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="c-header-1-icon-toggle">
<span class="ion-navicon-round"></span>
</div>
<div class="c-header-1-btn">
(503) 317-7676
</div>
<div class="c-header-1-btn c-social-1 -color-mixed-simple -hover-mixed-outline -size-small">
<ul class="c-social-1-inner">
<li class="c-social-1-item">
<a class="c-social-1-link -icon-instagram" href="https://www.instagram.com/sierraallegretto/" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="c-social-1-item">
<a class="c-social-1-link -icon-linkedin" href="https://www.linkedin.com/in/sierraallegretto/" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
I am currently working on the navbar of my website.
There are five elements on my navbar and I'd like to make an element darker when it is clicked.
These is what I've tried so far:
jQuery to change the active element:
<script type="text/javascript">
$(function(){
$('nav navbar-nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
$('nav navbar-nav a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active')
})
})
</script>
The five elements on the navbar:
<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
This is a screenshot of the website:
But it seems to not be working, only About is selected every single time.
Any ideas? Thanks a lot.
<script type="text/javascript">
$(function(){
$(".navbar-nav li a").on('click',function(){
$(nav-bar-nav li).toggleClass("active");
});
});
<ul class="nav navbar-nav">
<li class="">About</li> /*Just remove active class and add with js*/
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
.active{
background:black;
}
.active a{
color:#ffffff;
}
Use code as below:
DO NOT forget . before className in JQuery:
$('.nav .navbar-nav a') instaed $('nav navbar-nav a')
$('.navbar-nav li a').click(function(){
$(".navbar-nav li").removeClass("active");
$(this).parent().addClass("active");
});
.active{
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
I Guess You are probably providing the wrong selector to jQuery
$('div.nav li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active')
})
})
The Selectors
$("nav li a") or $(".navbar-nav li a")
Should work fine
Simply remove the active class on the li's on the click and then assign it to the li that was clicked:
$('.navbar-nav li').click(function(){
$('.navbar-nav li').removeClass('active');
$(this).addClass('active')
})
.navbar-nav li {
list-style: none;
display: inline;
padding: 5px 10px;
background: #d4d4d4;
}
.navbar-nav li a {
color: #222;
text-decoration: none;
}
.navbar-nav li.active {
background: black;
}
.navbar-nav li.active a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
So i want the list of the dropdown to be in the same line I don't know why it goes to the right
Bug Drop Down
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Mensagens
</li>
<li>Suporte
</li>
<li><a href='corpo.php?option=LOGOFF'>Logoff</a>
</li>
</ul>
....Try this....
For css:
.dropdown{
float: right;
}
.btn{
background-color: #2952a3;
color: white;
}
For HTML:
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Mensagens</li>
<li>Suporte
<a href='corpo.php?option=LOGOFF'>Logoff</a>
</li>
</ul>
</div></div>
Its with CSS of the anchor tags in the list item of dropdown menu.
It is set it the following by default:
.dropdown-menu > li > a {
padding: 3px 20px;
}
If you change the padding to 12px , it directly aligns with the dropdown button text.
.dropdown-menu > li > a {
padding: 3px 12px;
}
.dropdown-menu{
min-width:120px;
}
That is same as the default padding for the btn class.
This should fix the shift.
Also changing min-width property as your list items are declared to be inline.
I am using the following jquery
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this)
.closest('li.menu-item')
.children()[0]).addClass('active');
});
});
</script>
My css
<style>
#menu-wplook-main-menu li a.active {
color:#e53b51;
background: blue;
}
</style>
My html
<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >
<li role="presentation">
<a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> Home </a>
</li>
<li role="presentation menuli menulixl root" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> Services <span class="sub-arrow"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<!--<a class="splhed" href="">Software Development</a>-->
<a class="levelmenu" href="trav_port.php">Travel Portal Development</a>
<a class="levelmenu" href="GDS_integ.php">GDS Integrations</a>
<a class="levelmenu" href="xml_api_integ.php">XML/API Integrations</a>
<a class="levelmenu" href="white_label_web.php">White Label Website</a>
<a class="levelmenu" href="Hotel_Cab_portal.php">Hotel & Cab Portal Development</a>
<a class="levelmenu" href="travel_web.php">Travel Website Designing</a>
<a class="levelmenu" href="mobile_app_dev.php">Mobile Apps Development</a>
</li>
</ul>
</li>
<li role="presentation" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer" href=""> Products <span class="sub-arrow cursor_pointer"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<a class="levelmenu" href="trav_portal.php">Travel Portal</a>
<a class="levelmenu" href="travsoft.php">Travsoft</a>
<a class="levelmenu" href="white_label.php">White label</a>
<a class="levelmenu" href="hotel_extranet.php">Hotel Extranet</a>
<a class="levelmenu" href="holiday_manage.php">Holiday Management System</a>
<a class="levelmenu" href="hotrl_crs.php">Hotel CRS</a>
</li>
</ul>
</li>
</ul>
If I do not use the PHP link in href it works perfectly. But if I use the PHP link in href it is not working.
Question
Should I change anything in my PHP file?
It seems to be working fine. Your jQuery could be a bit cleaned up. For example:
$('#menu-wplook-main-menu li a').click(function () {
$('#menu-wplook-main-menu .active').removeClass('active');
$(this).addClass('active');
$(this).closest('li.menu-item').children().first().addClass('active');
});
But I think you main problem is that when clicking your links you navigate to a new page. So you reload the whole menu, and have no state of it left. and start from scratch.
You would need a function perhaps that will take your page from current address, look for the menu item and highlight it.
If you replace all your .php links with #1, #2 etc it works fine.
So either a load function, or load stuff with ajax maybe.
Try this :
$(document).ready(function(){
$(".dropdown-menu a").on("click",function(){
$(".dropdown-toggle").removeClass("active");
$(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");
})
})
Final code :
i change href to # for test :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.active {
color:#e53b51;
background: blue;
}
</style>
My html
<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >
<li role="presentation">
<a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> Home </a>
</li>
<li role="presentation menuli menulixl root" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> Services
<span class="sub-arrow"></span>
</a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<!--<a class="splhed" href="">Software Development</a>-->
<a class="levelmenu" href="#">Travel Portal Development</a>
<a class="levelmenu" href="#">GDS Integrations</a>
<a class="levelmenu" href="#">XML/API Integrations</a>
<a class="levelmenu" href="#">White Label Website</a>
<a class="levelmenu" href="#">Hotel & Cab Portal Development</a>
<a class="levelmenu" href="#">Travel Website Designing</a>
<a class="levelmenu" href="#">Mobile Apps Development</a>
</li>
</ul>
</li>
<li role="presentation" class="menu-item">
<a class="dropdown-toggle has-submenu cursor_pointer" href=""> Products <span class="sub-arrow cursor_pointer"></span> </a>
<ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">
<li class="col-xs-12">
<a class="levelmenu" href="#">Travel Portal</a>
<a class="levelmenu" href="#">Travsoft</a>
<a class="levelmenu" href="#">White label</a>
<a class="levelmenu" href="#">Hotel Extranet</a>
<a class="levelmenu" href="#">Holiday Management System</a>
<a class="levelmenu" href="#">Hotel CRS</a>
</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-menu a").on("click",function(){
$(".dropdown-toggle").removeClass("active");
$(this).closest(".menu-item").find(".dropdown-toggle").addClass("active");
})
})
</script>
</body>
</html>
1: I have a hierichal table of categories in my database:
2: I made this PHP script which turns this table into HTML: http://pastie.org/4591869
3: The HTML looks like this:
<script>
function toggleSubCategories(button) {
button = $(button);
button.parent().next().each(function() {
$(this).css('display') == 'none' ? $(this).css('display', 'inline') : $(this).css('display', 'none');
});
}
</script>
<div id="catlist">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Lots</button>
</li>
<ul style="display: inline; ">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Town Lots</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Bux Lots</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Wild Lots</button>
</li>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Items</button>
</li>
<ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Blocks</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Tools</button>
</li>
<ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-success">Enchanted</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-success">Normal</button>
</li>
</ul>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Services</button>
</li>
<ul style="display: none; ">
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Trader Services</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Constructor Services</button>
</li>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-info">Politician Services</button>
</li>
</ul>
<li>
<button onclick="toggleSubCategories(this)" class="btn btn-primary">Labour</button>
</li>
</div>
4: I also have this CSS file:
#catlist {
list-style: none;
display: block;
}
#catlist ul {
list-style: inherit;
display: none;
}
#catlist ul li {
display: block;
list-style: inherit;
}
#catlist button {
width: 200px;
height: 50px;
margin: 5px;
font-size: 2.5em;
display: inline;
}
5: This currently looks like this (after I click on the first main category):
6: But I want it to like this:
What am I doing wrong? I'm literally pulling my hair out here.
I'm using CSS3, HTML5, JQuery, PHP and Twitter Bootstrap.
You need to change positioning of #catlist ul. Do:
#catlist { position: relative; }
#catlist ul { position: absolute; top: 0; left: 220px; }
Haven't tested, but should work. Next time add jsfiddle with code instead of pictures, this will let us play with your exact code and solve your problem.
I think you are looking for vertical css menu, have a look at this page