How to convert this :
<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>
to wp_nav_menu
Too many div and class inside there, anyone can help me solve this problem?Thank you!
This can be accomplished using the nth-child() selector in css
see the codepen here
use this css:
.wp_nav_menu div:nth-child(1) {
background: blue;
}
.wp_nav_menu div:nth-child(2) {
background: red;
}
with the following markup:
<ul class="wp_nav_menu">
<li>
<div>
Foo
</div>
<div>
Bar
</div>
</li>
</ul>
As I see you are using a custom theme that have probably a Walker. In WordPress you can use a Walker to modify the HTML rendered by wp_nav_menu.
http://codex.wordpress.org/Function_Reference/Walker_Class
First, see if there is one, normally in theme/functions.php
Before starting with custom walkers, use the options before, after, link_before, link_after and items_wrap. See http://codex.wordpress.org/Function_Reference/wp_nav_menu
It will allow you to change the encapsulation of your menu items.
Related
I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
I am trying to add '+' Symball in front of category navigation on left side
I am using magento 1.9.x
This code i fount in category-navigation.phtml
I want to know how <?php echo $_menu ?> this comes from?
<div class="block vertical-menu">
<div class="title-block" style="margin-bottom:0px;"><h4><?php echo $this->__($title) ?></h4></div>
<div class="block-content">
<ul id="content-navigation">
<?php echo $_menu ?>
</ul>
</div>
</div>
My suggestion would be to do it in CSS. You can use Ionicons or something similar.
The $_menu html is generated inside the block class, rather than using a phtml file. So, you could extend that block and customize it, but this can also be achieved using CSS without having to worry about extending the block.
An example would be the following:
Example HTML
<nav id="nav">
<ol>
<li>Plus Sign</li>
<li class="active">Minus Sign</li>
</ol>
</nav>
Example CSS - This requires Ionicons
ol {
list-style: none;
}
#nav li::before {
font-family: Ionicons;
content: '\f489';
padding-right: 10px;
}
#nav li.active::before {
content: '\f209';
}
JS Fiddle - A working sample
https://jsfiddle.net/adpro/5xbw80b1/
My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.
Before click:
<ul>
<li id="panel1"><a></a><div class="content"></div></li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
After click:
<ul>
<li id="panel1">
<a></a>
<div class="content">
<form id="FORM"> ..... </form>
</div>
</li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
You can do that using :target css pseudo selector - it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use javascript.
<style>
form {
display: none;
}
form:target {
display: block;
background: red;
}
</style>
<ul>
<li id="panel1" ><div class="content">Show form<form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>
some examples of :target in action:
http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/
Without using ANY javascript at all, you can't.
Unless you just put links and redirect your users to a page with the expanded content every time.
Or unless you write some kind of complex CSS using the :hover pseudo-selector and not the click event.
CSS 3 has a :target pseudo-selector that might help. Here is an example: https://tinker.io/1756b
I have stuck in a code. I am building a website which has lots of inner page. i include "sidebar.php" and place my side navigation in this file.
<div class="side-nav">
<ul>
<li>Calls
<ul>
<li>Call Record</li>
<li>Call Logs</li>
<li>Live Call Intercept</li>
<li>Voicemail</li>
</ul>
</li>
<li>SMS
<ul>
<li>SMS Feature</li>
<li>Redirect SMS</li>
</ul>
</li>
</ul>
</div>
Now i want to high light "record-calls" li when "record-calls.php" page is open and other list don't show any backgrounds.
There is only 1 sidebar.php which is including in every page.
You can simply use if condition
if(stristr($_SERVER['PHP_SELF'],'record-calls.php'))
{
//highlight it
}
Thanks
There are some methods you can use to highlight current page on the sidebar menu. I don't know your structure. In this case, I would suggest get the current URL by php and check if, for example, record-calls is included in it or not. Something like that:
<li <?php if(strpos('record-calls', $current_url) !== false) echo "class='current'"; ?>>Call Record</li>
Set some unique class on your <body> for a given page and use it to style the relevant part of your menu.
Exemples (not pretty, but I use your actual HTML) :
.record-calls side-nav li li:first-child { /* highlight styles */ }
.call-logs side-nax li li:first-child + li { /* highlight styles */ }
etc...
Does anyone know how to edit/change Wordpress's wp_list_pages function in order to add classes to the ul and li items?
I'm trying to implement the new version of jquery.treeview which requires <li class="expandable"> and <ul style="display: none;"> on expandable lists and child ul's.
I've been messing around with this but it aint working too good in that it applies the 'expandable' class to all li's:
$pages = wp_list_pages('title_li=&echo=0' );
$pages = preg_replace('/class="/','class="expandable ', $pages); //note space on end of replacement string
//output
echo $pages;
And here is what the outputted html should look like:
<ul class="treeview" id="tree">
<li>Home</li>
<li class="expandable">Expand 1
<ul style="display: none;">
<li class="expandable">Expand 2_1
<ul style="display: none;">
<li>Expanded 3_1</li>
<li>Expanded 3_2</li>
<li>Expanded 3_3</li>
</ul>
</li>
<li class="expandable"><a href="#" >Expand 2_2</a>
<ul style="display: none;">
<li>Expanded 4_1</li>
<li>Expanded 4_2</li>
<li>Expanded 4_3</li>
</ul>
</li>
</ul>
Hope this makes sense and any help greatly appreciated, S.
I guess you are trying to activate a tree view on the page items. As this would require JavaScript you can simply add the class using JavaScript before initializing the tree view:
$("#tree li").addClass("expandable");
$("#tree").treeview();
If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):
$("#tree ul").hide();
Maybe this Plugin (Classy wp-List) helps. I haven't tried it yet but it says it will let you define a class for each page in the backend.
good luck.