I have a side menu and I have a lot of menu item so I would like to include drop down menus to group them. while it is almost working I need a way for it to expand and contract when the property menu is clicked on to reveal or hide the sub menu
This is my code
<li class="sub-menu dcjq-parent-li">
<a class="dcjq-parent active" href="javascript:;">
<i class="fa fa-desktop"></i>
<span>Properties</span>
<span class="dcjq-icon"></span></a>
<ul class="sub" style="display: block;">
<li>Manage</li>
<li class="active">Add</li>
</ul>
</li>
This appears correctly but when the user clicks on properties I would like it to either open or close the sub menu.
Could someone help me with this please
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
'''add this script in your code'''
Related
At the beginning I want to say that all the code presented below works well if put in right environment. I only have an issue with php in wordpress menu navigation that seems not to be able to work.
I'm trying to print user's role (there's only one role a user can have at a time) in a dropdown. PHP code:
<?php
$user = wp_get_current_user();
echo $user->roles[0]; ?>
dropdown code:
<ul id="primary-menu" class="navbar-nav ml-auto"><li class="nav-item menu-item menu-item-type-gs_sim menu-item-object-gs_sim">(Untitled)<small class="description"></small><small class="description"><div class="dropdown show"><a href="" class="nav-link">
</a><a class="nav-link btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="http://ds.com/wp-content/uploads/ultimatemember/1/profile_photo-40x40.png?1561371663" class="gravatar avatar avatar-40 um-avatar um-avatar-uploaded" width="40" height="40" alt="pzo3xic" data-default="http://ds.com/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg" onerror="if ( ! this.getAttribute('data-load-error') ){ this.setAttribute('data-load-error', '1');this.setAttribute('src', this.getAttribute('data-default'));}"> pzo3xic
</a>
<div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
<h6 class="dropdown-header" href="/user/">Paid Subscriber</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/profile">View Profile</a>
<a class="dropdown-item" href="/private-lessons">Private Lessons</a>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</div></small></li>
<li class="nav-item menu-item menu-item-type-taxonomy menu-item-object-category">Lessons</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page">Tests</li>
</ul>
I want it to present as below (where "Paid Subscriber" is the user's role name):
But when I replace "Paid Subscriber" with my custom shortcode "[print_user_role]" it kind of displays the text instead of the function within. Let me point out here that my shortcode works well when added into other places.
Problem:
The avatar along with dropdown are all in a code added via Shortcode in Menus plugin. This plugin (and all the others) don't support php inside.
I have tried adding a shortcode into my custom_functions.php, then invoking it by pasting [my_custom_function_sc] into the code, however it returned nothing.
I lost ideas on how to achieve this effect. Does any of you see a possible solution here?
EDIT
I think that I might actually print the user's role somewhere else within a certain block, then with jquery copy the text within the block and paste in place that interests me. Does any of you have any ideas on how to achieve this? I haven't used javascript/jQuery really.
Many thanks
Your code seems to be correct except this line --> echo $user->roles[0];
The correct code is --> echo $user->roles;
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 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.
what i am trying is like adding active class to accordion menu.
i have written a simple if else jquery code which is surely not the standard approach for sure, but if it can give the result i want then works for me.
But Issue is,
In my accordion menu there is main menu link and there is also Sub menus too.
so kind of confused how to make it work properly.
Here is my Accordion Menu HTML Executed Code.
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu" aria-activedescendant="panelbar_pb_active">
<li class="k-state-active k-item k-first k-state-highlighted" role="menuitem" aria-selected="true" id="panelbar_pb_active">Home</li>
<li aria-expanded="false" class="k-item k-state-default" role="menuitem"><span class="k-link k-header">
Search
<span class="k-icon k-i-arrow-s k-panelbar-expand"></span></span><ul class="k-group k-panel" role="group" aria-hidden="true" style="display: none;">
<li class="k-item k-state-default k-first" role="menuitem" aria-selected="true" id="panelbar_pb_active">Prize Bond Search</li>
<li class="k-item k-state-default k-last" role="menuitem">Users</li>
</ul>
</li>
<li aria-expanded="false" class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">
Profile
<span class="k-icon k-i-arrow-s k-panelbar-expand"></span></span><ul class="k-group k-panel" role="group" aria-hidden="true" style="display: none;">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link">Update Profile</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link">ChangePassword</span></li>
</ul>
</li>
</ul>
This is actually kendopanelbar, and i am using jquery bbq also, so trying this as i want the accordion state to be remembered when refreshed, and also if some on open the link the respective menu should be highlighted.
AnyHow, in my code, whenever i try the if statement is executed, i mean it don't go to else even if i change the menu link.
Here is my jquery code.
//this line is for twitter navbar.
url && $('ul.nav li').find('a[href="#' + url + '"]').parent().addClass('active');
//This is for Kendo accordion menu.
var MainMenuLink=$('li.k-item').has('a[href="#' + url + '"]');
var WithSubMenusLink=$('li.k-item').has('ul.k-group').has('li.k-item').has('a[href="#' + url + '"]');
if(url && WithSubMenusLink){
$('ul.k-group').find('a[href="#' + url + '"]').addClass('k-state-selected k-state-focused').parent().attr({
"aria-selected": true,
id: 'panelbar_pb_active'
});
alert('If is Executing.');
}
else{
alert('Else is Executed.');
$('li.k-item').find('a[href="#' + url + '"]').addClass('k-state-selected k-state-focused');
}
Any ideas why it is only executing if part and how to get the elements right for accordion menu to work properly.?
Also i did the same for twitter navbar, its working perfectly fine. except i didn't had to code the if else for twitter navbar. :)
You may have to use
if(url && WithSubMenusLink.length){
because $('li.k-item').has('ul.k-group').has('li.k-item').has('a[href="#' + url + '"]'); returns a jquery object so WithSubMenusLink will always be truthy.
You need to test WithSubMenusLink.length to see whether any element is returned by the selector query.
I'm using a form with multiple submits to detect which button is clicked, but the list does not appear properly in a jQuery Mobile menu. I want it to appear nicely like in the JQM docs (click the "Menu" button), but it instead appears like in this picture. (In case it isn't obvious, the black boxes were me editing the names out.) What do I need to do to get it to collapse the submit buttons into a nice list like in the docs?
Navigate to different section
<div data-role="popup" id="navmenu">
<form name="navmenuform" action="X.php" method="post">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<?php foreach ($array as $category) { ?>
<li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
<?php } ?>
</ul>
</form>
</div>
The short answer is don't put submit buttons (at least visible) in listview items.
The problem is that buttons and lisview item's content area have their styling padding, margin, border, etc. Instead of fighting with styling you can just leverage what jQM gives you.
IMHO the simplest way to achieve what you want, if you can live with GET instead of POST, is to ditch the form and populate list items with anchors that href to appropriate urls with parameters and use rel="external" like this:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
<li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
<li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
<li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
</ul>
</div>
If you want to be able to POST your form you can utilize a hidden input and a bit of JS code.
Given that you'll produce the following markup:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<form name="navmenuform" action="X.php" method="post" data-ajax="false">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li>Section 1:1</li>
<li>Section 1:2</li>
<li>Section 1:3</li>
<li>Section 1:4</li>
</ul>
<input id="param" type="hidden" name="" value="">
</form>
</div>
Don't forget to put data-ajax="false" on your form tag, otherwise jQM by default will try to submit the form via ajax.
You then use click event on a list item, change name and value in your hidden input and submit the form:
$(document).on("pageinit", "#page1", function(){
$("#navmenu ul li a").click(function(e){
//Prevent default behavior since we need to submit the form instead of following the link
e.preventDefault();
//Change name and value attributes in out hidden input
$("#param").attr("name", $(this).attr("href")).val($(this).text());
//Submit the form
$("form[name=navmenuform]").submit();
});
});
Here is jsFiddle