Thank you for reading... I have a 2 layer of navigation. which sort the content by good, bad and comment count. if user clicks on good it will bring another nav which is sort the content by time. such as today, last one week, last one month.
I can add class='active' using $_SERVER['PHP_SELF'] but twitter bootsrap dropdown menu does not have simple class='active' it is complicated. I am not able to come up with a solution. should I use for? foreach? I don't know. please see the html command in the code. this is my code.
<ul class="nav nav-tabs">
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Top'): ?> class="active"<?php endif; ?>>Top Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Bad'): ?> class="active"<?php endif; ?>>Bad Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Comments'): ?> class="active"<?php endif; ?>>Most Commented</li>
<!-- It's confusing me when It comes here... because as you see active option is not li tag. it's bunch of html code and also any url bellow can ben any of those up -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-time"></i> Today <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="URL=week" />Last 1 Week</a></li>
<li><a href="URL=month" />Last 1 Month </a></li>
<li><a href="URL=all" />All</a></li>
</ul>
</li>
</ul>
html commend: It's confusing me when It comes here... because as you see active li is not li it's bunch of html code and also also any url below can be any of those up
You can use the "active" class for the outter li (the one has class "dropdown") and another "active" class in your child dropdown.
This is an example
<ul class="nav nav-tabs">
<li class="">Home</li>
<li>Help</li>
<li class="dropdown active">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li class="active">Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
A live demo in JSBin
Related
How to convert static HTML5 navigation menu to WordPress dynamic menu.
I want to output this HTML menu in WordPress.and I don't know how to make ul and li in this form.
Thanks for your help.
This is my HTML5 navigation menu
<ul class="nav topnav">
<li class="dropdown active">
<i class="icon-home"></i> Home <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Homepage 2</li>
<li>Homepage 3</li>
<li>Parallax slider</li>
<li>Landing page</li>
</ul>
</li>
<li class="dropdown">
Features <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Typography</li>
<li>Components</li>
<li>Icons</li>
<li>Icon variations</li>
<li class="dropdown">3rd menus<i class="icon-angle-right"></i>
<ul class="dropdown-menu sub-menu-level1">
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Pages <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>About us</li>
<li>FAQ</li>
<li>Team</li>
<li>Services</li>
<li>Pricing boxes</li>
<li>404</li>
</ul>
</li>
<li class="dropdown">
Portfolio <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Portfolio 2 columns</li>
<li>Portfolio 3 columns</li>
<li>Portfolio 4 columns</li>
<li>Portfolio detail</li>
</ul>
</li>
<li class="dropdown">
Blog <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Blog left sidebar</li>
<li>Blog right sidebar</li>
<li>Blog fullwidth</li>
<li>Post left sidebar</li>
<li>Post right sidebar</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
I want to convert it to WordPress menu with
wp_nav_menu()
How can I make this custom menu?
I don't want to use any plugins to make custom menu.
First, you need to register nav menu in functions.php like this:
function register_menu(){
register_nav_menu('main-menu', 'Main menu');
}
add_action('init', 'register_menu');
When you do this, new option will appear in your admin panel. Go to Appearance > Menus and start adding links, pages or whatever you want to be in your menu. You can specify depth as well. Once you are done with your menu, select location of the menu, which will in this case be your newly created 'Main menu'. Now you want to go back to your page template in code editor to display that menu. It is very hard to use wp_nav_menu() function to display such complex menu so we will use different approach. We will grab menu items for start:
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
Now goes the main part. We are looping through menu items and displaying it's data in combination with custom html elements:
<?php
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
// check if menu has items
if(!empty($topMenuItems)){
?>
<ul>
<?php
foreach ($topMenuItems as $topMenuItem){
//Check if menu_item_parent property is set to 0.
That means that menu item is top level item.
if($topMenuItem->menu_item_parent == 0){
$topItemID = $topMenuItem->ID;
$submenuItems = array();
//check if there are submenu items for current top menu
item.
foreach ($topMenuItems as $submenuItem){
if($submenuItem->menu_item_parent == $topItemID){
$submenuItems[] = $submenuItem;
}
}
?>
<li>
<?php echo $topMenuItem->title ?>
<?php
// If there are submenu items for current item, display
them.
if(!empty($submenuItems)){
?>
<ul class="submenu">
<?php
foreach ($submenuItems as $subitem){
?>
<li>
<?php echo $subitem->title ?>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
<?php
}
}
?>
</ul>
<?php
}
?>
// Using this logic, you can go in depth how much you want to.
I am trying to include my pages in header.php file , But I need the list-item to have a class of active. The Menu is in header.php and currently looks like this:-
<li class="dropdown">
Help Desk No
<ul class="dropdown-menu">
<li><a title="City Level" href="City-Help.php">City Level</a></li>
<li><a title="State Level" href="State-Help.php">State Level</a></li>
<li><a title="India Level" href="India-Help.php">India Level</a></li>
<li><a title="World Level" href="World-Help.php">World Level</a></li>
</ul>
</li>
what I do :-define variable $page=basename($_SERVER['PHP_SELF']); in header.php page and for other pages change the variable value according to the page name but it have follow only one sub menu, how it is possible for 2,3,4 sub menus.
<li class="dropdown <?php echo ($page == "City-Help.php" ? "active" : "")?>">
Edited answer after #Kumar's comment
<li class="dropdown">
<a href="#" class="btn dropdown-toggle <?php echo ($page == "City-Help.php"
OR $page == "State-Help.php" OR $page == "India-Help.php"
OR $page == "World-Help.php") ? "active" : "";?>" data-toggle="dropdown">Help Desk No</a>
<ul class="dropdown-menu">
<li><a title="City Level" href="City-Help.php" >City Level</a></li>
<li><a title="State Level" href="State-Help.php">State Level</a></li>
<li><a title="India Level" href="India-Help.php">India Level</a></li>
<li><a title="World Level" href="World-Help.php">World Level</a></li>
</ul>
</li>
and make sure that you put the php code $page=basename($_SERVER['PHP_SELF']); before the menu mark-up.
P.S. I added a .btn class to the first <a> tag, since I guess that you are using bootstrap and in bootstrap, for an ordinary link being active or not has no visual difference.
After Searching, Finally I Got the Solution :-
<?php $activePage = basename($_SERVER['PHP_SELF'], ".php"); ?>
<li class="dropdown <?php if($activePage=='City-Help'){echo 'active';}elseif($activePage =='State-Help'){echo 'active';}else{echo 'noactive';} ; ?>">
Help Desk No
<ul class="dropdown-menu">
<li><a title="City Level" href="City-Help.php">City Level</a></li>
<li><a title="State Level" href="State-Help.php">State Level</a></li>
</ul>
</li>
How do i pass a value on dropdown bootstrap to the next page. There several options to choose and obviously it would be a waste of time making multiple same layout page but with different contents. How do i pass the value from dropdown to the next php page so that the next page can load the data based on that value.
I've seen some examples using the form method but it ruins the dropdown layout.Using bootstrap 3.3.7. Thanks in advance
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Register Donee</li>
</ul>
</li>
<li class="">Home</li>
<li>How It Works</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">State <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Johor</li>
<li>Selangor</li>
<li>Melaka</li>
<li>Penang</li>
<li>Perak</li>
<li>Pahang</li>
<li>Kedah</li>
<li>Kelantan</li>
<li>Terengganu</li>
<li>Negeri Sembilan</li>
<li>Perlis</li>
<li>Sabah</li>
<li>Sarawak</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
href should be something like
<li>Johor</li>
<li>Selangor</li>
<li>Melaka</li>
in page.php use $_GET['sel'] to get the selected value
I have following php code for horizontal menu, where I am calling the respective page from this php file, but I want whenever I call that page, that a href page become active.
<li class="mt">
<li class="sub-menu">
<a class="active" href="main.php">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
<ul class="sub">
<li><a href='?url=profile/profile.php'><span>My Profile</span></a></li>
<li><a href='?url=profile/editprofile.php'><span>Edit my profile</span></a></li>
<li><a href='?url=profile/welcome-letter.php'><span>Welcome Letter</span></a></li>
<li class='last'><a href='?url=profile/change-password.php'><span>Change Password</span></a>
</li>
</ul>
</li>
</li>
<?php if ($epin_module == TRUE) { ?>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-cogs"></i>
<span>My e-PIN</span>
</a>
<ul class="sub">
<li ><a href='?url=epin/used.php'><span>Used e-Pin</span></a></li>
<li><a href='?url=epin/un-used.php'><span>Unused e-Pin</span></a></li>
<li><a href='?url=epin/request.php'><span>Request e-Pin</span></a></li>
<li><a href='?url=epin/transferreport.php'><span>E-PIN Transfer report</span></a></li>
<?php if ($autowithdraw == FALSE) { ?>
<li class='last'><a href='?url=epin/epingenerate.php'><span>E-PIN generate report</span></a>
</li>
<?php } ?>
</ul>
</li>
I want when the MY e-Pin page is visited, that page became active. currently if I visit that page main.php stays active always.
You can test url GET parameter for each links like that :
Where you have to replace both {MyUrl} by the real url value.
I'm trying to build a basic header drop down nav for my three user account types, but they have different options depending on the account type. My code is throwing errors. Code is as follows:
<div class="btn-group pull-right">
<?php if ($this->logged_in):
$is_a = ($this->logged_in_usertype == App_Model_Users::TYPE_A);
$is_b = ($this->logged_in_usertype == App_Model_Users::TYPE_B);
$is_c = ($this->logged_in_usertype == App_Model_Users::TYPE_C);
?>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> <?php echo $this->logged_in_nickname;?>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php if ($is_b):?>
<li>Page Option One</li>
<li class="divider"></li>
<li>Page Option Two</li>
<li class="divider"></li>
<li>Page Option 3</li>
<li class="divider"></li>
<li>Page Option 4</li>
<li class="divider"></li>
<?php if ($is_a):?>
<li>Account-type 2 Profile</li>
<?php endif;?>
<?php endif;?>
<li>Account Settings</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
<?php else:?>
<a class="btn" href="/login">
<i class="icon-user"></i> Register / Login
</a>
<?php endif;?>
</div>
I think my problem is the 2nd if statement for (if is_a)... but I'm not sure - I'm rather new to php. Could someone please help me with the correct way to construct this if statement w/ as little changes as possible to the code?
Can you post the actual error here, to inspect.
and you have a syntax error on line 32
<?php else:?>
And the second if is inside the fist if statment