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
Related
I have bootstrap multilevel drop down navbar. when I click on the button I want the sub menu to drop right side of the list but it is overlapping last option. can anyone suggest me how to do it?
<ul class="nav navbar-nav col-lg-4">
<li class="active dropdown yamm-fw">
Home
</li>
<li class="dropdown"><a class="dropdown-toggle" data-hover="dropdown"
href="#"> category <span class="caret"></span> </a>
<ul class="dropdown-menu dropright">
<?php $sql=mysqli_query($con,"select id,categoryName from category
limit 10");
while($row=mysqli_fetch_array($sql))
{
$category_name=$row['categoryName'];
if ( $category_name == "Clothing")
{ ?>
<li class="dropdown yamm btn-group">
<a class="dropdown-toggle " data-toggle="dropdown" href="#"> <?php echo
$category_name; ?><span class="caret"></span></a>
<ul class="dropdown-menu dropright">
<?php $sql1=mysqli_query($con,"select id,subcategory from subcategory1
where categoryid=" .$row['id']);
while($row1=mysqli_fetch_array($sql1))
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row1['id'];?>"> <?php echo
$row1['subcategory'];?></a>
</li>
<?php } ?>
</ul>
</li>
<?php }
else
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row['id'];?>"> <?php echo
$row['categoryName'];?></a>
</li>
<?php
}
} ?>
</ul>
You may overcome this problem by writing the CSS the value of paddings.
.nav li {padding-top: 5px; padding-bottom: 5px;}
Also, have look at line-height property it might be create some problem. on some cases.
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 "";
}
i want to change the default HTML of wordpress's nav in a my custom theme adding a caret in the li that has a sub menu.
The default html looks like:
<ul id="menu-menu" class="nav navbar-nav">
<li id="menu-item-98" class="classes">Normal item</li>
<li id="menu-item-105" class="classes menu-item-has-children dropdown">Has a sub menu
<ul class="sub-menu">
<li id="menu-item-113" class="classes">Sub menu item</li>
</ul>
</li>
</ul>
And I havo to change this in this form:
<ul id="menu-menu" class="nav navbar-nav">
<li id="menu-item-98" class="classes">Normal item</li>
<li id="menu-item-105" class="classes menu-item-has-children dropdown">
<a href="#">
Has a sub menu
<!-- ADD THIS PART -->
<span class="caret"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-113" class="classes">Sub menu item</li>
</ul>
</li>
</ul>
I think that it's possible do something like this with php in function.php but I don't know how. Can you help me? Thanks in advice.
Add your submenu under Appearance --> Menus.
Then, you can use the Chrome/Firebug inspector to find the class/id of the UL for the submenu(s) you would like to add the caret to. Modify your child theme's style.css with something like the following:
ul .sub-menu {
list-style-image: url('caret.gif');
}
I'm trying to put in different <img> tags in each <li> generated by wp_nav_menu().
Meaning I want wp_nav_menu to generate this:
<ul id="main-menu">
<li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
<img id="icon-one" />
Link One
</a>
</li>
<li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
<img id="icon-two" />
Link Two
</a>
</li>
</ul>
Instead of this (the original output):
<ul id="main-menu">
<li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
Link One
</a>
</li>
<li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
Link Two
</a>
</li>
</ul>
So far I'm trying the $link_before parameter but its generating both of them at the same time, meaning its doing <img id="icon-one" /><img id="icon-two" /> in the middle of the <a> tag.
Now I'm looking at walkers, but I'm wondering if there's a clearer way to do it, and how?
I would probably go with a pure CSS solution and apply the image as a background image. So something like this:
#main-menu > li.menu-item:nth-child(1) > a {
/* 1st background image here */
}
#main-menu > li.menu-item:nth-child(2) > a {
/* 2nd background image here */
}
No need to mess with the PHP code for a simple display issue.
In WordPress menu admin, you can specify a css class for each menu item. This way you can use background-image css property to customize each menu item. The menu is then rendered like this :
<ul id="main-menu">
<li id="menu-item-219" class="icon-one menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
Link One
</a>
</li>
<li id="menu-item-220" class="icon-two menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
Link Two
</a>
</li>
</ul>
And you can do something like this for CSS :
#main-menu .icon-one {
background:url('../img/icon-one.jpg') no-repeat 0 0;
padding: 0 0 0 50px; // depending on your icon
}
#main-menu .icon-two {
background:url('../img/icon-two.jpg') no-repeat 0 0;
padding: 0 0 0 50px; // depending on your icon
}
NB : If you don't see the css option in the menu item admin block, check it in the option panel on top right.
I'm trying to create a custom accordion using jquery, have read through quite a few solution on stackoverflow but I just can't seem to get mine to work, I believe it has to deal with the .siblings. Anyway, here is my html code:
<div class="menu">
<ul>
<li class="current">
<img class="icon" src=""/>Dashboard
</li>
<li>
<img class="icon" src=""/>Mail
<ul class="submenu">
<li>
Write New
</li>
<li>
Junk
</li>
<li>
Deleted
</li>
</ul>
</li>
<li>
<img class="icon" src=""assets/colors.png""/>Child
<ul class="submenu">
<li>
Child 1
</li>
<li>
Child 2
</li>
<li>
Child 3
</li>
</ul>
</li>
<li>
<img class="icon" src=""/>Grid
</li>
<li>
<img class="icon" src=""/>Class
</li>
</ul>
</div>
And here is my jQuery code:
$('.menu ul li a').click(function() {
$(this).next('.submenu').siblings('li').slideUp();
$(this).next('.submenu').slideToggle();
});
The menu toggles open fine, but when I open one, the others won't close.
Thanks for your help !!
The reason why it won't close is because the siblings will look at the same level. So within the LI element it looks for more LI elements. You wan't the sibling LI's from the parent, and close there child .submenu.
Try this:
$(this).parent().siblings('li').find('.submenu').slideUp();
you're trying to close the one that you're about to open on the one that is currently open
$('.menu ul li a').click(function() {
$('.current').removeClass('current').next('.submenu').siblings('li').slideUp();
$(this).addClass('current').next('.submenu').slideToggle();
});
The whole code will be
$(this).parent().siblings('li').find('.submenu').slideUp();
$(this).next('.submenu').slideDown();
Just changed toggle to slideDown in last line....
I have one doubt ,every anchor will be clickable using user selector... can we make it only first level anchor clickable .any idea ?