I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).
That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.
I want to do this using php or css, but not using javascript.
I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.
Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.
<ul>
<li>
Menu item 1
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
</ul>
<li>
<a href='item-2'>
Menu item 2
</a>
<li>
</ul>
<article>Page contents</article>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
Wrap the bottom ul with this code in php.
This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.
<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
<?php } ?>
This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.
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 am currently using Bootstrap Timeline (example here). Since this will be a long timeline I want at the top of it to have some symbols (each with a date and a unique ID), which will represent certain event. When clicking a certain symbol I want to be redirect to the correspondent event on the timeline.
Nevertheless, at the moment, when I click the symbol I am redirected to the top of the div 'container' which contains the timeline and not to the specific <li>
Example:
LINK:
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
TO:
<div class="container">
<ul class="timeline2">
<li id = "type1" onclick = "window.location.hash = 'type1';">
</li>
<ul>
<div>`
Remove id from the link and remove the onclick from the timeline item. The hashtag in href should jump to the id set in the timeline item.
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
<div class="container">
<ul class="timeline2">
<li id="type1">
</li>
<ul>
<div>
Because you have the same id "type1" for two DOM elements. Id should be unique.
i need to insert span or div to parent li. For spoiler or button to use it in classie.js
<ul>
<li class="parent">
<ul></ul>
</li>
</ul>
I know that i should use walker in wordpress... but i dont know function
I'm adding an 'active' class to clicked menu bar items but it is removing when page goes to other link after click.
This is my HTML:
<ul class="nav navbar-nav">
<li class="active">
News / Article
</li>
<li>
Players
</li>
<li>
Forum
</li>
<li class="dropdown">
Rules <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
</ul>
</li>
<?php if(!empty($session)){ ?>
<li>
Profile
</li>
<?php } ?>
<li>
Gallery
</li>
<?php if(empty($session)){ ?>
<li>
Register
</li>
<?php } ?>
</ul>
Javascript:
$(".nav li").click(function () {
$(".nav li").removeClass('active');
$(this).addClass('active');
});
You cannot do that with only that javascript. You need to get data from url and decide which menu to be active.
First get current url in page. And do following operation;
$(".nav li").removeClass('active');
var urlType = document.URL.split("/");
$("a[href*='/" + urlType + "']").addClass("active"); // contains /players
When you go this url;
http://yourdomain.com/players;
the js will be;
$(".nav li").removeClass('active');
$("a[href*='players']").addClass("active");
And Players menu will be active
You are re-loading the site, so it load the HTML like the first time.
So you only will have the 'active' class until you don't leave or reload that website.
A way to fix it , load the content by Ajax, and the menu will not change.
I hope it will help you.
The active class probably removes because you're loading a new view when you click on a link and this loads some other HTML.
I'm looking for a method to use CSS to change the display properties to the nav element related to the page that is currently active.
For example, if the user is on the Home page, the 'Home' button in the navigation is styled differently.
I use the following code:
<li class="active">
Home
</li>
<li>
page1
</li>
<li>
page2
</li>
when I selecte page1 or page2, the home button remain active!
Use this
var $links = $('li');
$links.click(function(){
$links.removeClass('active');
$(this).addClass('active');
});
DEMO
<li <?php if($page=='home'){?> class="active"<?php }?>>
Home
</li>
<li <?php if($page=='page1'){?> class="active"<?php }?>>
page1
</li>
<li <?php if($page=='page2'){?> class="active"<?php }?>>
page2
</li>
As I understand - You have a static pages.
If so - just add class="active" for corresponding <li> in page1.html and page2.html
In page1.html it will be 2nd <li> element but in page2.html - last one