so I have been having an issue with some PHP strings that I can't seem to figure out. The goal is to have the "parent" link remain as an active state whilst allowing the dropdown function to contine.
<li class="<?php echo($activePage == "releases" ? "active" : "")?>" class="dropdown">
Press <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="<?php echo($activePage == "releases" ? "active" : "") ?>">Releases</li>
<li class="<?php echo($activePage == "clips" ? "active" : "") ?>">Press Clips</li>
<li class="<?php echo($activePage == "assets" ? "active" : "") ?>">Press Assets</li>
</ul>
</li>
So the goal here is to get the PRESS link to show an active state when either of the three releases, clips or assets
You'll notice in the first list I have two classes at the moment. The PHP echo class when infront does display the PRESS link its active state however doesn't allow for any drop down, thus rendering the other three links invisible, when I place the other class in the front, the drop down works but then the PRESS link doesn't show an active state.
Can anyone solve this issue for me? Thanks a lot!
This is the setup I used for a site to make the active parent element stay highlighted, as I walked down the tree:
#navigation ul.nav > li:hover ul a:hover,
#navigation ul.nav > li:hover, #navigation ul.nav > li:hover ul li:hover {
background: #3e4b51 none repeat scroll 0 0 !important;
text-decoration: none;
}
The menu setup is this:
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav">
<li>
HOME
</li>
<li>
Level 1
<ul class="sub-menu">
<li>
Level 2
<ul>
<li>
Level 3
<ul>
<li>
Level 4 Item 1
</li>
<li>
Level 4 Item 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Related
How can I create a function to scan all menu items from Drupal 7 system and if there is a nested ul, add dropdown CSS classes to the nested ul and add a custom attribute to the parent li container? Im using UIKIT which will automatically create the dropdowns.
Here's my current menu HTML output:
<ul class="menu">
<li class="first last expanded">
<a title="" href="/node/add">Add content</a>
<ul class="menu">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Here's what I need it to be:
<ul class="menu">
<li class="first last expanded" data-uk-dropdown>
<a title="" href="/node/add">Add content</a>
<ul class="menu uk-dropdown">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Im looking for the simplest approach possible.
You can crawl menu tree your self and write out menu HTML as you like. Used that and should be something like:
$tree = menu_tree_all_data('menu_machine_name');
Also, if I remember well, if you do only that your active (current) menu item won't be marked any way, and for marking it you have to also call (after getting $tree variable) :
menu_tree_add_active_path($tree);
But again, if I remember well, that function is only available if you install "Menu block" module...
Print out $tree variable after that and organize your code to crawl recursively menu tree you collected.
I'm creating an custom template for wordpress, and I got problem with menu. I want to create menu in the sidebar.
I got static menu like this:
<ul class="purp_bullet">
<li><a href="#sub-1">A/a>
<ul id="sub-1">
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
<li>B</li>
</ul>
</li>
<li><a href="#sub-2">C/a>
<ul id="sub-2>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
<li>D</li>
</ul></li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
With CSS like this:
ul.purp_bullet {
list-style-image: url('img/list_bullet.png');
padding-left: 17px;
text-decoration: none;
}
ul.purp_bullet li a {
color: #003366;
text-decoration: none;
}
ul.purp_bullet li a:hover {
color: red;
text-decoration: none;
}
ul.purp_bullet li a:active {
color: red;
text-decoration: bold;
}
I want it to be fully dynamic, just like wordpress menus, when I go into menu section in admin panel and create my own menu from pages that i created, then drag "my custom menu" onto widgets panel (sidebar) so it shows up. Note that this isn't my main menu (I already got the menu in header).
Also there is one more thing I need to do.
I got pages like employers and when I'm on some employer page the menu must be expanded( or rolled down, sorry for my bad english :x), but when i'm on other page it must be rolled up.
Screens:
When I'm on some employer page
When I'm on other pages like contact etc
Do i need create new menu in functions and then hook it like my main menu?
Can anyone help me how to do it?
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
http://hotelshimlahill.com/demo/
this website I've made in bootstrap,
the header section including nav bar is coming from a separate file called 'header.php'
Now i want to add active class for each page on which user is visiting.
how can i do that? Kindly assist me.
Thankyou.
In your individual page such as about.php, services.php, you can do:
$currentPage = 'about'; // current page is about, do the same for other page
include('header.php');
Then in your header.php, you can check:
<ul class="nav navbar-nav">
<li class="<?php if($currentPage =='about'){echo 'active';}?>" >Home</li>
<li class="<?php if($currentPage =='services'){echo 'active';}?>" >about</li>
</ul>
Or you can try to use jQuery as well:
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
All menu links are inside ul > li. so, give id to all li. and on each page by using jquery addClass "active" to li.
in you bootstrap css you find this line i think it should be at line no 4841
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
background-color: #5C0000;
color: #FFFFFF;
}
you change this line as
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a.active{
background-color: #5C0000;
color: #FFFFFF;
}
now in your project file find the section where the navigation generated those line
<ul class="nav navbar-nav">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>facilities</li>
<li>booking</li>
<li>testimonials</li>
<li>careers</li>
<li>contact Us</li>
</ul>
then change it as accrodinly
<ul class="nav navbar-nav">
<li><a href="index.php" <?php if($active=='Home') echo "class='active'"; ?>>Home</a></li>
<li><a href="about.php" <?php if($active=='about') echo "class='active'"; ?>>about</a></li>
<li><a href="services.php" <?php if($active=='services') echo "class='active'"; ?>>services</a></li>
<li><a href="facilities.php" <?php if($active=='facilities') echo "class='active'"; ?>>facilities</a></li>
<li><a href="reservations.php" <?php if($active=='booking') echo "class='active'"; ?>>booking</a></li>
<li><a href="testimonials.php" <?php if($active=='testimonials') echo "class='active'"; ?>>testimonials</a></li>
<li><a href="careers.php" <?php if($active=='careers') echo "class='active'"; ?>>careers</a></li>
<li><a href="contactUs.php" <?php if($active=='contact') echo "class='active'"; ?>>contact Us</a></li>
</ul>
then you have to a litle bit change in every files that you have in navigation link
such as
index.php
add this line at the top of the file that i mention on the navigation link
<?php $active ='Home'; ?>
and for about.php
<?php $active ='about'; ?>
I think it of course select of your active page
thnaks
I am making a CSS navigation bar, which is stored in a folder called 'includes'. Basically what I want is, when a link is clicked, for it to become active. Im linking to this folder with "include('includes/header.php');"
My CSS is:
nav ul li a {
font-size:22px;
color:#fff;
height:67px;
line-height:67px;
text-decoration:none;
min-width:101px;
text-align:center;
float:left;
background: grey;
border-right:1px solid black;}
nav ul li a.current, nav ul li a:hover {padding-bottom:5px;}
The content of header.php is:
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Blog</li>
<li>Forums</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
How do I go about using this method, and having each link made active when clicked?
You could do something like this for the header
<ul>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
...
</ul>
Once I had to do something similar, and I achieved this by setting some variables at the beginning of each php file. Then, the header.php must test these variables in the if statements.
I did something like this in the past very similar to what Romain said:
I named each page something like and included the nav file:
<?php $page = 'one';
require_once'./template/nav.php';?>
Here is the content of my nav file:
<ul class="nav navbar-nav">
<li <?php echo ($page == 'one') ? "class='active'" : ""; ?> >
Home</li>
<li <?php echo ($page == 'two') ? "class='active'" : ""; ?> >Page two</li>
<li <?php echo ($page == 'three') ? "class='active'" : ""; ?> >page three</li>
</ul>
Hope that helps
I currently have this:
jQuery:
jQuery(document).ready( function(){
var thispage = location.pathname.substring(1);
//document.write(thispage);
jQuery('#menu li a[href~="'+ thispage + '"]') // ~= is contains. Tweak as needed.
.addClass('active');
});
CSS:
li.active {
background-color: yellow;
}
HTML:
<nav id="topNav">
<ul id="menu">
<li>HOME</li>
<li>ABOUT US</li>
<li> TECHNOLOGY</li>
<li>CAREERS
<li>BLOG
<!--<ul>
<li style="background-color:#898486;">OPPORTUNITIES</li>
</ul>-->
<li class="last">CONTACT US</li>
</ul>
</nav>
My goal is to each menu item to shade a different color when the page is active. I have tried numerous ways to fix this but I am unable to get this to work. in my CSS i even have an element item for :focus, but it only works when the href="#" and not with my current setup. What am I doing wrong here?
Got it to work with two changes:
jQuery('#menu li a[href*="'+ thispage + '"]').parent().addClass('active');
As I suggested in my comment use *= as "contains", not ~= ("contains word"), and I think you wanted to add the active class to the <li/>, not the <a/> tag.