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.
Related
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
So I've been working on this site for a friend and everything works fine except for a few buttons and images move around when the window is resized. How do I counter this problem?
Full window
http://i.stack.imgur.com/JuuEa.png
Resized
http://i.stack.imgur.com/UaqCI.png
<div id="topnav">
<ul id="topnav li">
<li id="charactersearch">
</li>
<li id="highscores">
</li>
<li id="forum">
</li>
<li id="facebook">
</li>
<li id="youtube">
</li>
<li id="guilds">
</li>
<li id="deaths">
</li>
</ul>
</div>
You have set the position for all your icons to be absolute.
left: 610px;
left: 690px;
left: 805px;
Etc. When you are resizing your windows they stay X pixels away from left.
Try to put your icons in a list
<div id="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact us</li>
</ul>
</div>
With a CSS like this
#navigation {
position: relative;
background-color:yellow;
}
#navigation ul li {
margin-left:10%;
display:inline;
}
EDIT: Are you setting your images through css? Your link doesn't appear to have anything inside. Can you add the image inside the link?
<li id="forum"></li>
<li id="forum"><image scr=""/></li>
I am using html nav bar in wordpress
my html nav bar code
<li class="active">
<a href="http://www.siteurl.com/shop/" class="active">
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=172">
<i class="icon-nav icon-star"></i>
About </a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=176">
<i class="icon-nav icon-th-large"></i>
Gallery</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=174">
<i class="icon-nav icon-comments"></i>
Services</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=4">
<i class="icon-nav icon-shopping-cart"></i>
Shop</a>
</li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=187">
<i class="icon-nav icon-pencil"></i>
Blog</a></li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=145">
<i class="icon-nav icon-plus-sign"></i>
Events</a></li>
<li>
<a href="http://www.siteurl.com/shop/?page_id=178">
<i class="icon-nav icon-map-marker"></i>
Contact</a>
</li>
</ul>
</nav>
I have tried to create a conditional tags for each page like below
example for home
<?php if ( is_home() ) { ?>
<li class="active">
<a href="http://www.siteurl.com/shop/" class="active">
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
<?php } else { ?>
<li>
<a href="http://www.siteurl.com/shop/" >
<i class="icon-nav icon-home"></i>
Home
</a>
</li>
But this is not working
how to active the menu icons when we view the respective pages
If i use direct html navigational menu
Only way to do this is by using the wordpress navigation system
http://codex.wordpress.org/Function_Reference/wp_nav_menu
A lot of work has gone into their system, so there's no reason why you would want to replicate it.
Appart from reading the Codex (essential), you can search for tutorials, articles and Q&A's, there are plenty of them.
WordPress Wp_Nav_Menu with Icons and Active Item Highlight
We will be doing:
Home link in our wp_nav_menu that always gets current blog url
Customize each menu item as you want
Put pretty icons in our menu
Active item highlight
Function Examination: wp_nav_menu
In this tutorial, we’ll dive deep into everything that the
wp_nav_menu function can do, use the Walker Class to add a sub
description, and touch on some of its related functions.
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 ?
<div id="nav">
<ul>
<li class="item">Home/</li>
<li class="item">Tab2</li>
<li class="item">Tab3</li>
<li class="item">Tab3</li>
</ul>
<div>
now, i want to add class='active' to the menu. when the menu is the current page.namely. when i on the home page. the li label is <li class="item" class="active"> the others are <li class="item">. when i on the Tab2 page. the li label is <li class="item" class="active">.the others are <li class="item">
PS: IF I want to add the class="active" to a label, like this <li class="item">Home/</li>. how should i do? according to the Headshota's instruction. i got this, but it's too complicated. is there a simple way to get it with php? thank you.
<?php
$current = array("","two","three","four");
?>
then
<li class="item">Home/</li>
<li class="item">Tab2</li>
<li class="item">Tab3</li>
<li class="item">Tab3</li>
Try this. This will add class to menu when you click on it:
$('#nav ul li').click(function(){
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
in Jquery you can compare link hrefs with part of the url, but it's not a good practice...
you can have url parameter, for example menu_id
which you'll pass on every request. and check on every menu for appropriate value;
<li class="item <?php if($_GET['menu_id']==1){ echo 'active';} ?>">
Home
</li>
<li class="item <?php if($_GET['menu_id']==2){ echo 'active';} ?>">
Tab2
</li>