I have created a dynamic nav menu for a website. The menu loads to each page from a separate file, therefore i am using php required on all pages. I am trying to highlight the menu item when visitor is on each page and i cannot use JS or jQuery. All should be done in PHP, CSS and HTML only.
So far, i have the following function in the navigation file:
<?php
function setActive($name){
global $pageName;
if ($pageName == $name){
echo "class='active' ";
}
}
?>
And example of a menu:
<ul>
<li ><a <?php setActive ('v')?> href="v.php">Home</a></li>
<li>
cd
<ul class="hidden">
<li>a</li>
<li>b</li>
</ul>
</li>
</ul>
The function works for main menu, but i cannot get it work for submenu pages. I want the item cd to highlight when visitor lands on page a.php or b.php.
Any ideas how to solve it?
Thanks
Related
I have an archive events page that links to a single page that lists all previous events created in the past and can only be visited via the archive events page.
My question is, how can I highlight the archive events page url link when viewing this single page?
For example the below snippet targets a hard-coded nav link to highlight the events link when viewing the other page, however my menu is not hard-coded:
<nav class="main-navigation">
<ul>
<li>...</li>
<li>...</li>
<li>
<?php if(get_post_type() == 'event' OR is_page('past-events')) echo 'class="current-menu-item"';?>>
events
</li>
<li>...</li>
</ul>
</nav>
The tutorial I am following does not give the alternative coded way of targeting this similarly in the functions.php page, for a dynamic menu that is created via the wordpress dashboard menu.
I have tried searching for examples, but I havent found anything that has helped so far and in need of some outside help.
How can I do this?
I can see something wrong. you haven't put the php code in right place. corrected code is this. try this and let me know if it works
<nav class="main-navigation">
<ul>
<li>...</li>
<li>...</li>
<li <?php if(get_post_type() == 'event') echo 'class="current-menu-item"';?>>
</li>
<li>...</li>
</ul>
</nav>
Ok, I think I have found a solution -- being a novice -- has worked!
Hopefully someone can point out any changes/improvements I could make, but here it is:
To highlight a menu link for a different page than the one that you are on/viewing, for example in my scenario: I have an archive events page and within that page I have a link that takes you to a single page that lists all past previous events, but that has no link in the main navigation to it.
function nav_class($classes) {
// Remove "current-menu-item" class
$classes = array_diff($classes, array('current-menu-item'));
// If this is the "past-events" page, highlight the event menu item
if (in_array('menu-item-36', $classes) && is_page('past-events')) {
$classes[] = "current-menu-item";
}
return $classes;
}
add_filter('nav_menu_css_class', 'nav_class', 10, 2);
I hope this helps someone else out.
I'm currently developing a website and decided to have the menus to be written in a separate file.
Currently I have a php page holding the menu list called menu.php
<?php
$menu='<div class="headMenu">
<ul>
<li><span>Home</span></li>
<li><span>Transaction</span></li>
<li><span>Schedule</span></li>
<li><span>Book</span></li>
</ul>
</div>';
echo $menu;
?>
Whenever you enter the Transaction Page, the distinct code for that page is
<li class="active"><span>Transaction</span></li>
and same as the other pages,
I'm thinking this can be done in jquery using its .addClass() method, but I have no idea of passing variables from one page to the separate page holding the menu written in php
Why not to do a function in menu.php that returns a string containing menu with "activated" page?
If I understand your question correctly, this would be helpfull:
<?php
function renderMenu($site){
$menu='<div class="headMenu">
<ul>
<li '. ($site=="index.php"?'class="active"':'') .'><span>Home</span></li>
//etc...
</ul>
</div>';
return $menu;
?>
And then in your main script:
echo renderMenu(__FILE__);
Hellow friemds i develop a magento website and i created page and i want to linked that page into navigation menu bar
http://www.magentocommerce.com/knowledge-base/entry/adding-page-links-in-the-navigation-bar
Starting With Magento CE 1.7 there is an event that lets you add anything to the top menu.
The event is page_block_html_topmenu_gethtml_before. In the default theme, this is used to add categories in the menu. Check out the method Mage_Catalog_Model_Observer::addCatalogToTopmenuItems(). You can do the same.
If you are working on versions before 1.7 just edit the file app/design/frontend/{interface}/{theme}/template/catalog/navigation/top.phtml and add your link inside the ul element:
<ul id="nav">
<?php echo $_menu ?>
<li><?php echo $this->__('Text here')?></li>
</ul>
or like this
<ul id="nav">
<?php echo $_menu ?>
<li><?php echo $this->__('Text here')?></li>
</ul>
The approach for version 1.6 works in 1.7 also but it's not that clean.
Good day.
I am trying to modify the navigation menu layout of a drupal theme. The problem is i'm not a coder, but can follow tutorials and understand bits and peaices.
What I have is a set of menus and sub menus. At the moment the sub menus expand below their parent menus. What I want is for the sub menus to expand but live below all the parent menus so it would look like the structure below.
How it currently looks
Navigation_Menu_One
Sub_Menu_One
Sub_Menu_Two
Sub_Menu_Three
Navigation_Menu_Two
Navigation_Menu_Three
What I want it to end up looking like:
Navigation_Menu_One
Navigation_Menu_Two
Navigation_Menu_Three
Sub_Menu_One
Sub_Menu_Two
Sub_Menu_Three
What I have figured out is that the menu system is built from the following class's
<ul class="menu">
<li class="first collapsed"></li>
<li class="first collapsed"></li>
<li class="collapsed"></li>
<li class="expanded active-trail"> (The expanded Menu)
<ul class="menu"></ul> (the sub menu I want to relocate)
</li>
<li class="collapsed"></li>
<li class="collapsed"></li>
<li class="collapsed"></li>
<li class="last collapsed"></li>
</ul>
So what I want to do is be able to add something to the page that would capture the
<ul class="menu"></ul>
that appears below the
<li class="expanded active-trail">
and relocate it to below the last class or another div.
I understand I will need to do this using PHP from one of the template files with in the theme. Would any one have any idea how I would go about doing this. The theme I am using is the Corolla theme if that helps at all, but I guess it would be the same for any theme.
Hi and welcome to StackOverflow.
It seems to me from your description that you should be able to achieve this without writing any code. Simply navigate to site building > menus > navigation and use the drag handles to move the sub menus so that they are underneath the desired menu item.
I have the following code to display all pages into a nav bar in Wordpress
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
Trying to figure out how to add a div class to each li?
You should be able to use link_before and link_after:
<ul>
<?php wp_list_pages('title_li=&link_before=<div class="myClass">&link_after=</div>'); ?>
</ul>
There's a section on styling the <li>s in the documentation.