Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Dynamic Navigation with Active Class

    I am trying to make a dynamic top navigation menu for a website that uses an 'active' class to notate what page the user is on. The script below somewhat works but nor right. It's just a series of IF statements to determine the page name and assign it a class or not. I have a similar system for page titles and meta data.

    now each file sees it and all the unactive links look and act fine, however, when you are on the active page, it takes the active pages name in the menu (ie, Home, about, contact, etc...) turns it grey makes it small, throws it up about 10px above the others, moves it to the the far right of the menu list, and finally makes it unclickable.

    Any ideas as to why this wouldnt work? Thank you guys in advance for your time and assistance.

    PHP Code:
    <?php $currentPage basename($_SERVER['SCRIPT_NAME']); ?>

    <div id="templatemo_menu_wrapper">

        <div id="templatemo_menu">




        <ul>
            <?php echo "\n"; if ($currentPage == 'index.php'){ ?><li class="current fast">Home</li><?php     } else { ?><li><a href="index.php">Home</a></li><?php ?>
            <?php echo "\n"; if ($currentPage == 'about.php'){ ?><li class="current fast">About</li><?php    } else { ?><li><a href="about.php">About</a></li><?php ?>
            <?php echo "\n"; if ($currentPage == 'services.php'){ ?><li class="current fast">Services</li><?php } else { ?><li><a href="services.php">Services</a></li><?php ?>
            <?php echo "\n"; if ($currentPage == 'gallery.php'){ ?><li class="current fast">Gallery</li><?php  } else { ?><li><a href="gallery.php">Gallery</a></li><?php }  ?>
            <?php echo "\n"; if ($currentPage == 'contact.php'){ ?><li class="current fast">Contact</li><?php  } else { ?><li><a href="contact.php">Contact</a></li><?php }  ?>
        </ul>

        </div> <!-- end of menu -->

    </div> <!-- end of menu wrapper -->
    that is my 'menu.php' that is included in each file like this: <? php include'includes/menu.php'; ?>

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    I'm confused. It sounds to me like it is working as anticipated:
    now each file sees it and all the unactive links look and act fine, however, when you are on the active page, it takes the active pages name in the menu (ie, Home, about, contact, etc...) turns it grey makes it small, throws it up about 10px above the others, moves it to the the far right of the menu list, and finally makes it unclickable.
    So long as the correct link is flagged as active, then PHP has done its job. What I read into this is a rendering issue which is a problem with your html/css, not PHP.

    Now if all links were marked as active or none were when they should be, that would be an issue with PHP.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts
    The problem I believe its having is that for some reason, the PHP will not see that class. The rest of that script works great. If I take away all the php from that script and just let the html run inside the page, it works fine. It only messes up the active class when I add the PHP to make it dynamic and include the menu file. Thats why I was thinking it had to be somethign in the php that I just overlooked possibly.

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Quote Originally Posted by willscarlet View Post
    The problem I believe its having is that for some reason, the PHP will not see that class. The rest of that script works great. If I take away all the php from that script and just let the html run inside the page, it works fine. It only messes up the active class when I add the PHP to make it dynamic and include the menu file. Thats why I was thinking it had to be somethign in the php that I just overlooked possibly.
    PHP itself will never see an html class. To PHP, this is just textual data, it doesn't matter what it is.
    If the HTML is created properly with no anchor tag and with the class specified in the list item depending on the current page, then PHP has done its job properly. If its a rendering issue (ie: how it looks), that's all HTML/CSS; it is possible that you haven't properly structure the HTML with the CSS.

    You simply need to check the resulting HTML source. If you are on the script gallery.php and you see:
    Code:
         <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="services.php">Services</a></li>
            <li class="current fast">Gallery</li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    Then PHP has done is job properly. If you do not see that you need to post what you do see.

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Code:
    <ul>
    <li class="current"><a href="index.php">Home</a></li>
    <li ><a href="about.php">About</a></li>
    <li ><a href="services.php">Services</a></li>
    <li ><a href="gallery.php">Gallery</a></li>
    <li ><a href="contact.php">Contact</a></li>
    </ul>
    Sorry, im pretty bad at this still, i did not think to look at the page source to see the end result. Above is what the page source says.

    I put the menu in a freebee template and put it online to test it, here is the result. but that same code that the PHP is outputting works fine if I just manually place that code into the page instead of through the php include.


    http://sumterpd.com/menu/index.php

  • #6
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    This output HTML code does not match what you have here in the PHP code. The current has an anchor tag and the non-current ones have a space in the list item element. Neither of these are possible with this block of PHP code in use.

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Im sorry sir. I had found a way to make the code shorter so when I put it up a little but ago i used the new code. Same results though.

    Code:
    <?php $current_page = basename($_SERVER['PHP_SELF']); ?>
    
    <div id="templatemo_menu_wrapper">
    
    	<div id="templatemo_menu">
        
    
    <ul>
    <?php
    $menu_items = array('Home' => 'index.php', 'About' => 'about.php', 'Services' => 'services.php', 'Gallery' => 'gallery.php', 'Contact' => 'contact.php');
    foreach($menu_items as $key => $val)
    {
        $class='';
        if($current_page == $val)
        { $class = 'class="current"'; }
        echo '<li '.$class.'><a href="'.$val.'">'.$key.'</a></li>';
    }
    ?>
    </ul>
        
        </div> <!-- end of menu -->
    
    </div> <!-- end of menu wrapper -->

  • #8
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    This code functions exactly as your html results are. To remove the anchor, you simply use two different possible strings instead of appending:
    PHP Code:
    foreach ($menu_items AS $key => $val)
    {
        print (
    $current_page == $val sprintf('<li class="current">%s</li>'$key) : sprintf('<li><a href="%s>%s</a></li>'$value$key)) . PHP_EOL;

    Beyond this, its all your CSS as your HTML source matches the php code to create it.

  • #9
    New Coder
    Join Date
    Aug 2012
    Posts
    65
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for the coding help. I added your code to the script, but It still does not seem to work properly. It is throwing the current page listed in the menu to the right of the menu and taking away all the css. if interested you can see it in that link I posted above.

    Thank you for your help anyways, it must be a strange way I have the css or something.

  • #10
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Quote Originally Posted by willscarlet View Post
    Thank you for the coding help. I added your code to the script, but It still does not seem to work properly. It is throwing the current page listed in the menu to the right of the menu and taking away all the css. if interested you can see it in that link I posted above.

    Thank you for your help anyways, it must be a strange way I have the css or something.
    All you need to do is evaluate your HTML. If it looks as you expect it to look, then (as I've mentioned several times now), the problem is your CSS not PHP.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •