Is there anyway in bootstrap 4 to highlight the active element.
Currently Home is the active element, but it isn't that bold enough.
<li class="nav navbar-nav ">
<a class="nav-link {{ Request::is('/') ? "active" : "" }}" href="#">Home</a>
<a class="nav-link " href="#">Home</a>
</li>
just style the .nav-link.active simply
.navbar-nav .nav-link.active {
font-weight: bold;
background-color: red;
}
Related
picture of my tabs
I want to change the color that when I hovering mouse over text to white.
I did add this code but it doesn't work.
<style>
.nav-link > .hover {
color: white;
}
</style>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
aria-selected="true">วันจันทร์</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
aria-selected="false">วันอังคาร</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="pills-contact-tab" data-bs-toggle="pill"
data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
aria-selected="false">วันพุธ</button>
</li>
</ul>
have you try this way?
.nav-link {
color: red;
}
.nav-link:hover {
color: white;
}
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>
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>
I make a sidebar with UIKIT Nav component.
http://getuikit.com/docs/nav.html
That could be able to make accordion like this.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
If I click accordion menu. Tag will change it.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent uk-open" aria-expanded="true">
parent
<div style="overflow: hidden; position: relative;">
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</div>
</li>
</ul>
If I do page reload, All accordion will close.
So what do I wanna ask you the question is how to always open when the request-url is current?
I wanna always open the parent ul tag that nest class uk-active li tag.
I think that will be able with jQuery or PHP.
any ideas?
I'm sorry to reply this too late.
Finally, I understand always open trigger is 'uk-active' class.
There are no relation with 'uk-open', aria-expanded="true" or div bla bla bla.
Just set 'uk-active' class on element you wanna always show it.
So, This is my solution.
http://codepen.io/qwe001/pen/JKgBBx
And ya, Need to use $_SERVER['REQUEST_URI'] to set uk-active class.
Btw, I use php framework Laravel5. So my code is like this.
<div class="uk-width-medium">
<div class="uk-panel uk-panel-box">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent {{ Request::is('admin/parent1*') ? 'uk-active' : '' }}">
Parent 1 (Have Nest and Nest is current)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent1/nest1*') ? 'uk-active' : '' }}">
Nest 1 (current)
</li>
<li class="{{ Request::is('admin/parent1/nest2*') ? 'uk-active' : '' }}">
Nest 2 (not current)
</li>
<li class="{{ Request::is('admin/parent1/nest3*') ? 'uk-active' : '' }}">
Nest 3 (not current)
</li>
</ul>
</li>
<li class="{{ Request::is('admin/parent2*') ? 'uk-active' : '' }}">
Parent 2 (Not Nest)
</li>
<li class="uk-parent {{ Request::is('admin/parent3*') ? 'uk-active' : '' }}">
Parent 3 (Have Nest but Current nests are nothing)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent3/nest1*') ? 'uk-active' : '' }}">
Nest 1 (not current)
</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: Must need adjust parent uk-parent class color like this.
/* Adjust Parent Background Color */
.uk-nav-side > li.uk-parent.uk-active > a {
background: inherit;
color: inherit;
}
.uk-nav-side > li.uk-parent.uk-active > a:hover,
.uk-nav-side > li.uk-parent.uk-active > a:focus {
background: rgba(0, 0, 0, 0.05);
color: #444;
outline: none;
}
/* Adjust Parent Child Padding */
.uk-nav-side > li.uk-parent .uk-nav-side > li > a {
padding-left: 1em;
}
.uk-nav-side > li.uk-parent .uk-nav-side > li.uk-active > a:hover {
color: #FFF;
}
i dont know your another code, but a way is this:
Your url: index.php?id=2
<?php
$page = (isset($_GET['id']))?(int)$_GET['id']:'';
?>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="<?=(($page==2)?'uk-active':'')?>">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
This code:
<?=(($page==2)?'uk-active':'')?>
is the short notation of this:
<?php
if($page == 2){
echo "uk-active";
}else{
echo "";
}
Im trying to get the following menu structure but I didn't find solution for it without a terrible hack in the core source of the knp menu bundle.
My output is at the moment:
<ul class="nav nav-list">
<li class="open">
<a class="dropdown-toggle" href="#">
Systembenutzer
</a>
<ul class="submenu" style="display: block;">...</ul>
</li>
</ul>
And I wanna get this:
<ul class="nav nav-list">
<li class="open">
<a class="dropdown-toggle" href="#">
<i class="icon-user"></i>
<span class="menu-text">Systembenutzer
<b class="arrow icon-angle-down pull-right"></b>
</span>
</a>
<ul class="submenu" style="display: block;">...</ul>
</li>
</ul>
I'm not able to set for the label the following tags < i >, < span >, < b >.
Is there any solution to get that working?
Notice that the structure posted above is required because there is a dropdown menu implemented with javascript.
If I understood well you need a new style for menu item. Why don't you define additional style as of
<style type="css/text">
.nav-list ul li >a {
font-style: italic;
/* options from yours class="menu-text" style */
}
.nav-list ul li:after >a {
/* options from yours class="arrow icon-angle-down pull-right" style */
}
</style>
it fits well if you'll change all view of . Also you could use
$menu->setChildrenAttribute('class', 'icon-user menu-text');
in your php menu definition