I am creating a menu dynamically based on the categories registered on the dataBase, What I need is:
When someone click in the link, this option should have the css class 'active', showing in with page the user is and even the pages are created dynamically.
I have no idea how to do this because I am php student and I couldn't find this information in google for "Dynamically menus" Thank you very much.
<nav class="menu">
<ul class="list">
<li class="line"><a id="item" href="index.php">Home</a></li>
<?php
$categories = $db->select("select * from tbl_category");
if($categories){
while ($result = $categories->fetch_assoc()){
echo <<<HTML
<li id="line" ><a class="item" href="categories.php?category=$result[id]">$result[name]</a></li>
HTML;
}
}
?>
</ul>
<nav>
First of all, you're looping through that while loop and adding the id of "line" to each and every <li> element. I suggest you create unique id's for each list item. I don't necessary advocate using the code the way you have it, just as an example, here's your code edited to do just that:
if($categories){
$i = 1;
while ($result = $categories->fetch_assoc()){
$i++;
echo <<<HTML
<li id="line$i" ><a class="item" href="categories.php?category=$result[id]">$result[name]</a></li>
HTML;
}
}
Then when someone clicks on your link, just use jQuery with something like this:
$(".item").click(function() {
$(this).parent('li').addClass('active');
});
Try something like that:
<nav class="menu">
<ul class="list">
<li class="line"><a id="item" href="index.php">Home</a></li>
<?php
$current_page = isset($_GET['category']) ? $_GET['category']: -1;
$categories = $db->select("select * from tbl_category");
if($categories){
while ($result = $categories->fetch_assoc()){
echo '<li id="line">';
if($result['category'] === $current_page) {
// If we're currently in the active page then add the active class to the <a>
echo '<a class="item active" href="categories.php?category='. $result[id] .'">';
} else {
echo '<a class="item" href="categories.php?category='. $result[id] .'">';
}
echo $result['name'];
echo '</a>';
echo '</li>';
}
}
?>
</ul>
<nav>
Thank you all for help, based on your code, I solved doing this:
menu.php:
<nav class="menu" id="menu">
<ul id="list" class="list">
<li id="line" class="<?php if($presentPage == '0')echo 'active';?>"><a id="item" class="item" href="index.php">Home</a></li>
<?php
function checked($pp, $id){
if($pp == $id){
$status = 'active';
return $status;
}
}
$query = "select * from tbl_category";
$category = $db->select($query);
if($category){
while ($result = $category->fetch_assoc()){
echo "
<li id='line' class='".checked($presentPage, $result['id'])."'><a id='item' class='item' href='categories.php?category=".$result['id']."'>".$result['name']."</a></li>
";//end echo
}//end while
}//end if
?>
</ul>
</nav>
In my index.php:
<?php $presentPage = 0;?>
<?php require_once 'header.php';?>
<?php require_once 'menu.php';?>
and in my categories.php:
<?php
if (!isset($_GET['category']) || $_GET['category'] == NULL) {
$presentPage = 0;
}else{
$presentPage = intval($_GET['category']);//just to make sure that the variable is a number
}
?>
<?php require_once 'header.php';?>
<?php require_once 'menu.php';?>
///...my code...
and in my CSS of course:
.active{
background: linear-gradient(#821e82, #be5abe);
}
Thats is working perfectly for me, Thank for all help.
The current page someone is in on my website is highlighted on the navigation menu (the class "active"). I've done this through php, which compares the current page to a string. I'd like to simplify it even further because this string is actually the href value of the menu item.
Is there a way to get the href value of this item via php? That way I could just use that variable instead.
My php code:
<?php
function curPageName()
{
return substr($_SERVER["SCRIPT_NAME"], strrpos($_SERVER["SCRIPT_NAME"], "/") + 1);
}
function activeMenuItem($href)
{
return (curPageName() == $href) ? "class=\"active\"" : "";
}
?>
and the html in the body:
<ul id="navilist">
<li><a href="index.php" <?php echo activeMenuItem('index.php'); ?>>Home</a></li>
<li><a href="resume.php" <?php echo activeMenuItem('resume.php'); ?>>Resume</a></li>
<li><a href="projects.php" <?php echo activeMenuItem('projects.php'); ?>>Projects</a></li>
<li><a href="contact.php" <?php echo activeMenuItem('contact.php'); ?>>Contact</a></li>
</ul>
Build your menu in a loop:
$menu_items = array(
'Home' => 'index.php',
'Resume' => 'resume.php'
);
<ul id="navilist">
<?php foreach ( $menu_items as $title => $href ): ?>
<li><a href="<?php echo $href; ?>" <?php echo activeMenuItem($href); ?>>
<?php echo $title; ?>
</a></li>
<?php endforeach; ?>
</ul>
You Can't get the href value using php code.
in my knowledge - one way to get the href value
You should declare the page name with one one variable like
$home="home.php";
$resume="resume.php";
.
.
.
<ul id="navilist">
<li><a href="<?php echo $home;?>" <?php echo activeMenuItem($home); ?>>Home</a></li>
<li><a href="<?php echo $resume;?>" <?php echo activeMenuItem($resume); ?>>Resume</a></li>
.
.
.
</ul>
I am not sure. Please check it.
Dynamic Header, CSS Class Change To Active USING PHP (dirrectory)
I want the class of the <li> tag to change under the active dirrectory...
now, every guide shows me how to do it when your page equals it, but i want to change
the <li> depending on what dirrectory im on
for example:
if say im on http://example.com/RESOURCES/code/opensource, or http://example.com/RESOURCES/images/clipart i want the "RESOURCES" ^^ <li> to be 'class="active"' while the rest display 'class="noactive"'
or if im on http://example.com/tutorials/css/flawless-dropdown-menu I want the "tutorials" <li> to be 'class="active"' while the rest are 'class="noactive"'
URL Setup:
This is my example of how my url's are displayed...
http://example.com/tutorials/css/flawless-dropdown-menu
^^That URL is the page of a tutorial....under the "tutorials" directory, than under the "CSS" category directory, than the page title (all of these directories are not real and are rewrites from .htaccess) [irrelevant]
Navigation Setup:
<ul id="mainnav">
<li class="noactive">Home</li>
<li class="active">Tutorials</li>
<li class="noactive">Resources</li>
<li class="noactive">Library</li>
<li class="noactive">Our Projects</li>
<li class="noactive">Community</li>
</ul>
Figured out the ANSWER...I was over thinking it.
HTML
<ul id="mainnav">
<li class="<?php if ($first_part=="") {echo "active"; } else {echo "noactive";}?>">Home</li>
<li class="<?php if ($first_part=="tutorials") {echo "active"; } else {echo "noactive";}?>">Tutorials</li>
<li class="<?php if ($first_part=="resources") {echo "active"; } else {echo "noactive";}?>">Resources</li>
<li class="<?php if ($first_part=="library") {echo "active"; } else {echo "noactive";}?>">Library</li>
<li class="<?php if ($first_part=="our-projects") {echo "active"; } else {echo "noactive";}?>">Our Projects</li>
<li class="<?php if ($first_part=="community") {echo "active"; } else {echo "noactive";}?>">Community</li>
</ul>
PHP
<?php
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>
header.php
$activePage = basename($_SERVER['PHP_SELF'], ".php");
nav.php
<ul>
<li class="<?= ($activePage == 'index') ? 'active':''; ?>">Home</li>
<li class="<?= ($activePage == 'tutorials') ? 'active':''; ?>">Tutorials</li>
...
Through PHP you can try -
<?php
// gets the current URI, remove the left / and then everything after the / on the right
$directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/'));
// loop through each directory, check against the known directories, and add class
$directories = array("index", "tutorials","resources","library","our-projects","community"); // set home as 'index', but can be changed based of the home uri
foreach ($directories as $folder){
$active[$folder] = ($directory[0] == $folder)? "active":"noactive";
}
?>
<ul>
<li class="<?php echo $active['index']?>">Home</li>
<li class="<?php echo $active['tutorials']?>">Tutorials</li>
<li class="<?php echo $active['resources']?>">Resources</li>
<li class="<?php echo $active['library']?>">Library</li>
<li class="<?php echo $active['our-projects']?>">Our Projects</li>
<li class="<?php echo $active['community']?>">Community</li>
</ul>
Maybe this helps you:
$(document).ready(function()
{
var parts = document.URL.split("/");
// [http:, empty, your domain, firstfolder]
var firstFolder = parts[3];
$("#mainnav li").attr("class", "noactive");
$("#mainnav a[href='/" + firstFolder + "/']").parent().attr("class", "active");
});
It's probably easier to do with jQuery but this works:
$url='http://example.com/tutorials/css/flawless-dropdown-menu';//pass the current url here instead of a static string.
$segments = explode ("/",$url);
$menuItems=array('Tutorials','Resources', 'Library', 'Our-Projects','Community');
$menu=array();
foreach ($menuItems as $menuItem) {
if($segments[3]==strtolower($menuItem)){
$menu[]=('<li class="active">'.str_replace("-"," ",$menuItem).'</li>');
} else {
$menu[]=('<li class="no-active">'.str_replace("-"," ",$menuItem).'</li>');
}
}
foreach ($menu as $item) {
echo $item.'<br />';
}
if you use mysql_fetch defined your row for menu title.
if we take your menu title is MENU in mysql database and you have to put in
(Home,tutorials,library,resources,our-projects,community)
<?php
//connect your data bass
include(connection.php');
//get your from ID like www.google?id=1
$id = $_GET['id'];
$query = "select * from pages where id='$id'";
$query1 = mysql_query($query);
while($row= mysql_fetch_array($query1))
{
?>
<html>
<?php $active= $row['MENU'];?>
<ul>
<li class="<?php if($active=='Home'){echo 'active';}else{echo'noactive';}?>">Home</li>
<li class="<?php if($active=='tutorials'){echo 'active';}else{echo'noactive';}?>">Tutorials</li>
<li class="<?php if($active=='resources'){echo 'active';}else{echo'noactive';}?>">Resources</li>
<li class="<?php if($active=='library'){echo 'active';}else{echo'noactive';}?>">Library</li>
<li class="<?php if($active=='our-projects'){echo 'active';}else{echo'noactive';}?>">Our Projects</li>
<li class="<?php if($active=='community'){echo 'active';}else{echo'noactive';}?>">Community</li>
</ul>
</html>
<?php };?>
This answer will apply if all your pages have a php extension and you want a long messy way. I put the code below on top of every php page giving each page an ID which means all pages will have an ID which is tiresome and boring and hard to track.
<?php $page = 1; ?>
Now in my header or navigation I used the code below to put the active class. You can also put an else if you want something else.
<nav id="navbar" class="navbar">
<ul>
<li class="<?php if($page == 1){ echo "active"; } ?>"><a class="url" href="index.php">Index</a></li>
<li class="<?php if($page == 2){ echo "active"; } ?>"><a class="url" href="single-post.php">Information</a></li>
<li class="<?php if($page == 3){ echo "active"; } ?>"><a class="url" href="single-post.php">Wanted</a></li>
<li class="<?php if($page == 4){ echo "active"; } ?>"><a class="url" href="single-post.php">Workshop</a></li>
<li class="<?php if($page == 5){ echo "active"; } ?>"><a class="url" href="gallery.php">Gallery</a></li>
<li class="<?php if($page == 6){ echo "active"; } ?>"><a class="url" href="featured.php">Featured</a></li>
<li class="<?php if($page == 7){ echo "active"; } ?>"><a class="url" href="contact.php">Contact Us</a></li>
</ul>
</nav>
"includes/header.php" - This goes in Top of the File
<?php
$activePage = basename($_SERVER['PHP_SELF']);
$index="";
$nosotros="";
$cursos="";
$contacto="";
switch ($activePage) {
case 'index.php':
$index=' class="current"';
break;
case 'nosotros.php':
$nosotros=' class="current"';
break;
case 'cursos.php':
$cursos=' class="current"';
break;
case 'contacto.php':
$contacto=' class="current"';
break;
default:
break;
}
?>
and this goes on the nav section
<ul>
<?php
echo '<li'.$index.'><div>Inicio</div></li>';
echo '<li'.$nosotros.'><div>Nosotros</div></li>';
echo '<li'.$cursos.'><div>Cursos</div></li>';
echo '<li><div>Academia</div></li>';
echo '<li><div>Tienda</div></li>';
echo '<li'.$contacto.'><div>Contacto</div></li>';
?>
</ul>
Try the following:
<ul class="sub-menu">
<div class="h-10"></div>
<li class="<?php if ($your_variable=="test") {echo "active"; }
else{echo"noactive";}?>">
Test
</li>
<li class="<?php if ($your_variable=="test2") {echo "active";
} else {echo"noactive";}?>">
<a href="test2.php" >Test2</a>
</li>
<li class="<?php if ($your_variable=="test3") {echo
"active"; } else {echo "noactive";}?>">
Test3
</li>
</ul>
**strong PHP text**
<?php
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$your_variable = basename($_SERVER['PHP_SELF'], ".php");
?>
Here we can do a simple thing also :
<li class="page-scroll <?php if(basename($_SERVER['PHP_SELF'])=="aboutus.php"){echo "active";} ?>">About us</li>
Here is another take using PHP:
<ul class="navbar-nav">
<?php
// Defines all pages in navigation
$pages = array(
'Home' => 'index.php',
'Products' => 'products.php',
'Services' => 'services.php',
'Contact' => 'contact.php',
'About' => 'about.php'
);
// Gets active page URL
$active = basename($_SERVER['PHP_SELF']);
// Loops through all pages
foreach ($pages as $title => $url) {
// Checks if active url is matched and adds active CSS class
if ($active === $url) {
echo '<li>'.$title.'</li>';
}
// Prints out default style for remaining links
else {
echo '<li>'.$title.'</li>';
}
}
?>
</ul>
$getUrl = $_SERVER['REQUEST_URL']; -> www.example.com/home.php
$getFileName = explode('/',$getUrl);
The result of $getFileName Will Be In Array ->[" ","home.php"]
$result = $getFileName[2]; //home.php
<li class="<?php if ($result=='' || $result == 'index.php') {echo 'active'; }?>"><a href='#'>Home</a></li>
<li class="<?php if ($result=='about.php') {echo 'active'; }?>"><a href='#'>About Us</a></li>
<li class="<?php if ($result=='contact.php') {echo 'active'; }?>"><a href='#'>Contact Us</a></li>
You can use str_replace for this.
$path = $_SERVER['REQUEST_URI'];
$active = str_replace('/','', $path);
<ul>
<li class="nav-item <?php if($active == '' || $active == 'index.php'){echo 'active';}?>">
<a class="nav-link" href="index.php">HOME</a>
</li>
<li class="nav-item <?php if($active == 'about.php'){echo 'active';}?>">
<a class="nav-link" href="about.php">ABOUT US</a>
</li>
</ul>
<?php $request_uri= $_SERVER['REQUEST_URI'];?>
<ul>
<li class="<?php if((strpos($request_uri,"index.html")!==false) || $request_uri=="" || $request_uri=="/"){echo "selected";}?>">Home</li>
<li class="<?php if((strpos($request_uri,"service")!==false)){echo "selected";}?>">Services </li>
<li class="<?php if((strpos($request_uri,"product")!==false)){echo "selected";}?>">Products</li>
<li class="<?php if((strpos($request_uri,"blog")!==false)){echo "selected";}?>">Blog</li>
<li class="<?php if((strpos($request_uri,"question")!==false)){echo "selected";}?>">Ques & Ans</li>
<li class="<?php if((strpos($request_uri,"career")!==false)){echo "selected";}?>">Career</li>
<li class="<?php if((strpos($request_uri,"about-us")!==false)){echo "selected";}?>">About</li>
</ul>
Im trying to validate my output data from a php site that Im calling with
<?php include_once('nav.inc.php');
?>
The thing is when Im using this code
<ul>
<li>GÄSTBOK</li>
<li>OM MIG</li>
<li>PORTFOLIO</li>
<li>CURRICULUM VITAE</li>
</ul>
I wont get any errors, But when Im trying with the other code I get alot of errors. Is there any way to write the code so It validates ?
This is the code thas bugging me
<?php
$index = 'menu';
$gb = 'menu';
$portfolio = 'menu';
$cv = 'menu';
$menuLinkid=basename($_SERVER['PHP_SELF'],'.php');
if($menuLinkid=='index'){
$index = 'myButtons';
}else if($menuLinkid=='gb'){
$gb ='myButtons';
}else if($menuLinkid=='portfolio'){
$portfolio ='myButtons';
}else if($menuLinkid=='cv'){
$cv ='myButtons';
}
?>
<div id="fronticon">
<a href="contact.php"><img src="images/em.png" alt="Email" title="Email"/>
</a>
</div>
<ul>
<li><a class="<?php echo $index; ?> "href="index.php">OM MIG</a></li>
<li><a class="<?php echo $gb; ?> "href="gb.php">GÄSTBOK</a></li>
<li><a class="<?php echo $portfolio;?> " href="portfolio.php">PORTFOLIO</a></li>
<li><a class="<?php echo $cv; ?> "href="cv.php">CURRICULUM VITAE</a></li>
</ul>
Thanks
You need spaces between the ?> " and the href. You can't have them next to each other with no space.
Should be:
<li><a class="<?php echo $index; ?> " href="index.php">OM MIG</a></li>
So I have a menu in a php file that looks like this (This is the whole file. I'm totally new to PHP.)
menu.php:
<li id="current"><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Results</span></li>
<li><span>Pictures</span></li>
<li><span>Our Location</span></li>
Now in my pages I do this (index.php):
<div id="tabs1" >
<ul>
<!-- CSS Tabs -->
<?php include("menu.php"); ?>
</ul>
</div>
So what I want to be able to do is change the line above to this:
<?php include("menu.php?current=pictures"); ?>
Which would make the active tab the Pictures tab. How can I do this?
You could also try this:
Your php script
<?php
$selected = "pictures";
$current_id = ' id="current"';
include "menu.php";
?>
this is your menu:
<ul>
<li <?php if ($selected == "pictures") print $current_id; ?>><span>Home</span></li>
<li <?php if ($selected == "blog") print $current_id; ?>><span>Blog</span></li>
<li <?php if ($selected == "home") print $current_id; ?>><span>Results</span></li>
<li <?php if ($selected == "me") print $current_id; ?>><span>Pictures</span></li>
<li <?php if ($selected == "contacts") print $current_id; ?>><span>Our Location</span></li>
</ul>
Try this:
<li <?php if($_GET['current'] == 'home') {echo 'id="current"'}?>><span>Home</span></li>
<li <?php if($_GET['current'] == 'blog') {echo 'id="current"'}?>><span>Blog</span></li>
<li <?php if($_GET['current'] == 'results') {echo 'id="current"'}?>><span>Results</span></li></li>
and so on....
worth looking at
intelligent navigation
<nav>
<style>
#active{
color:#FFC801;
}
</style>
<?php
$activePage = basename($_SERVER['PHP_SELF'], ".php");
?>
<ul>
<li>About Us</li>
<li>Mentors</li>
<li>Tours</li>
<li>Animation</li>
<li>Blog</li>
<li>Testimonials</li>
<li>Press/Media</li>
<li>Facts</li>
</ul>
</nav>
I don't think its necessary for it to be done at the server side (using up CPU cycles).
Use javascript/CSS to achieve this.