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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation how can i make my menu determine which tabs is active?

    Hi All,

    i am after some advice please,

    i have created a menu which is working, however the only part i am unsure of is when clicking on one of the tabs and the new page is displayed how do i tell the tab which tab is current, therefor change colour

    each of my php pages sets the value of a session e.g
    entertainment => $_SESSION['page'] = 'entertainment';
    computing =>$_SESSION['page'] = 'computing';
    and so on

    so would i use this session value along with if statments to determin which tab is current?

    e.g
    Code:
    if($_SESSION['page'] == "entertainment"){
    <li id="current">
    <a href="entertainment.php">Entertainment</a></li>
    }
    else{
    <li><a href="entertainment.php">Entertainment</a></li>
    }
    and perform that sort of check for each tab to see if it matches the session value? or is there a better way?

    here is my menu code
    Code:
    <div id="menu">
        <ul>
          <li id="current"><a href="index.php">Home</a></li>
          <li><a href="entertainment.php">Entertainment</a></li>
          <li><a href="computing.php">Computing</a></li>
          <li><a href="electronics.php">Electonics</a></li>
          <li><a href="clothing.php">Clothing</a></li>
          <li><a href="health.php">Health &amp; Beauty</a></li>
          <li><a href="misc.php">Miscellaneous</a></li>
        </ul>
    	<ul class="right">
          <li><a href="#">By Item</a></li>
          <li><a href="#">By Store</a></li>
          <li><a href="#">By Brand</a></li>
        </ul>
      </div>
    also i would like to disable the tabs in the ul class right unless the $_SESSION['page'] equals entertainment,computing or electronics is this possible?

    thanks guys
    Luke

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    [...]perform that sort of check for each tab to see if it matches the session value? or is there a better way?
    I'd do it like
    Code:
    <div id="menu" class="<?php echo $_SESSION['page'];?>">
        <ul>
          <li class="home"><a href="index.php">Home</a></li>
          <li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
          <li class="computing"><a href="computing.php">Computing</a></li>
         ..............
        </ul>
      </div>
    Code:
    .home li.home, .entertainment li.entertainment, .computing li.computing{
    /* set active style here*/
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    LJackson (08-25-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate, i have tried the above but i am unable to get it working

    here is my entire code, i've probably messed up somewhere

    Code:
    <?php
    session_start();
    $_SESSION['page'] = "entertainment";
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #menu {
      float:left;
      width:940px;;
      background:#DAE0D2 url(images/menu/bg.gif) repeat-x bottom;
      font-size:13px;
      line-height:normal;
      }
    #menu ul {
      margin:0;
      padding:15px 5px 0;
      list-style:none;
      float:left;
      width:708px;
      }
    #menu .right {
    float:right;
    width:208px;
    }
    #menu li {
      float:left;
      background:url(images/menu/norm_left_on.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #menu li:hover {
      background-image:url(images/menu/norm_left2.gif);
      }
    #menu a {
      float:left;
      display:block;
      background:url(images/menu/norm_right_on.gif) no-repeat right top;
      padding:5px 10px 4px 1px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #menu a {float:none;background-image:url(images/menu/norm_right_on.gif);}
    /* End IE5-Mac hack */
    #menu a:hover {
      color:#333;background-image:url(images/menu/norm_right2.gif);
      }
    #menu #current {
      background-image:url(images/menu/norm_left2.gif);
      }
      
    #menu #current a {
      background-image:url(images/menu/norm_right2.gif);
      color:#333;
      padding-bottom:5px;
      }
    .home li.home, .entertainment li.entertainment, .computing li.computing, .electronics li.electronics, .clothing li.clothing, health li.health, misc li.misc{
    background-image:url(images/menu/norm_right2.gif);
    padding-bottom:5px;
    }
    
    </style>
    </head>
    
    <body>
    <?php print $_SESSION['page'];?>
    <div id="menu" class="<?php echo $_SESSION['page'];?>">
        <ul>
          <li class="home"><a href="index.php">Home</a></li>
          <li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
          <li class="computing"><a href="computing.php">Computing</a></li>
          <li class="electronics"><a href="electronics.php">Electonics</a></li>
          <li class="clothing"><a href="clothing.php">Clothing</a></li>
          <li class="health"><a href="health.php">Health &amp; Beauty</a></li>
          <li class="misc"><a href="misc.php">Miscellaneous</a></li>
        </ul>
      </div>
    </body>
    </html>
    any ideas mate

    thanks
    Luke

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Might be a specificity issue, try
    Code:
    #menu.home li.home a, #menu.entertainment li.entertainment a, #menu.computing li.computing a, #menu.electronics li.electronics a, #menu.clothing li.clothing a, #menu.health li.health a, #menu.misc li.misc a{
    background-image:url(images/menu/norm_right2.gif);
    padding-bottom:5px;
    }
    instead.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    LJackson (08-25-2009)

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ah ha thats doing something now

    but because im using the sliding doors method only the right hand side highlights any idea how i can get the left hand side to highlight also?

    here is the menu so you can see what i mean

    cheers
    Luke

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Um... you might need to repeat the same for your all <li> tags, like
    Code:
    #menu.home li.home,  #menu.entertainment li.entertainment /* and so on */{
      background-image:url(images/menu/norm_left2.gif);
      }
    If you are getting tired of repeating the same CSS selectors, then read how would i show selected ona menu that is a file include? too
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    LJackson (08-25-2009)

  • #7
    Regular Coder funnymoney's Avatar
    Join Date
    Aug 2007
    Posts
    364
    Thanks
    17
    Thanked 24 Times in 24 Posts
    you can also try something like this

    PHP Code:
    <?php

    if (!empty($_GET)) {
        
    $key array_keys($_GET);
        
    $key $key[0];
    }
    else {
        
    $key "home";
    }

    $menu 
    <<<EOF
    <style type="text/css">


    li#active a {
        color: #bb0000;
    }
    </style>
    <div id="menu">
        <ul>
          <li class="home" %style%><a href="?home">Home</a></li>
          <li class="entertainment" %style%><a href="?entertainment">Entertainment</a></li>
          <li class="computing" %style%><a href="?computing">Computing</a></li>
          <li class="electronics" %style%><a href="?electronics">Electonics</a></li>
          <li class="clothing" %style%><a href="?clothing">Clothing</a></li>
          <li class="health" %style%><a href="?health">Health &amp; Beauty</a></li>
          <li class="misc" %style%><a href="?misc">Miscellaneous</a></li>
        </ul>
      </div>
    EOF;
    $match     preg_match ("/\"$key\" \%style\%/"$menu$matches);

    $active    "\"$key\" id=\"active\"";

    $patterns     = array("/{$matches[0]}/""/%style%/");
    $replace    = array($active"");

    $menu preg_replace($patterns$replace$menu);

    print 
    $menu;

    ?>

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    thanks abduraooft

    @funnymoney thanks for your reply mate, but as i have it working now i dont want to start changing the method but its nice to see there are different ways of doing things...

    does anyone know how i can disable certain tabs if the session <> entertainment,computing etc... i would like to disable the tabs on the right hand side if possible.

    thank you
    Luke

  • #9
    Regular Coder funnymoney's Avatar
    Join Date
    Aug 2007
    Posts
    364
    Thanks
    17
    Thanked 24 Times in 24 Posts
    Quote Originally Posted by LJackson View Post
    @funnymoney thanks for your reply mate, but as i have it working now i dont want to start changing the method
    you don't need to change method, just instead of $_GET use $_SESSION

  • #10
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ah right lol looks a lot more confusing

    im still unable to disable certain tabs is this possible?

    thanks
    Luke

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    im still unable to disable certain tabs is this possible?
    What do you mean by "disable tabs" ? Make them invisible?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    just not clickable maybe? , i only want them to be used if the current page is entertainment,computing etc... so if the page is home for example then the 3 tabs would not be able to be clicked on and may have a different colour image so that its clear they are disabled.

    ultimatly what i want to do is when on one of the 6 main category pages have 2 tabs highlighted eg, the current page and the by item tabs, then i want the by item tab to change if the by store/by brand is selected then that one would be highlighted as well as the current category tab.

    kinda like having two menus i suppose the left one and the right one each one having a highlighted tab if the page is one of the category pages,

    sorry if this doesnt make sence
    its a bit of a brain teaser...

    thanks mate
    Luke

  • #13
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok im kinda getting somewhere with the multi select thingy

    i have created a new session (view) and have changed my menu like so
    Code:
    <div id="menu" class="<?php echo $_SESSION['page'];?>">
        <ul>
          <li class="home<?php if($_SESSION['page']=='home') { echo ' selected'; } ?>"><a href="index.php">Home</a></li>
          <li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
          <li class="computing"><a href="computing.php">Computing</a></li>
          <li class="electronics"><a href="electronics.php">Electonics</a></li>
          <li class="clothing"><a href="clothing.php">Clothing</a></li>
          <li class="health"><a href="health.php">Health &amp; Beauty</a></li>
          <li class="misc"><a href="misc.php">Miscellaneous</a></li>
        </ul>
    </div>
    <div id="menu" class="<?php echo $_SESSION['view'];?>">
        <ul class="right">
          <li class="item"><a href="#">By Item</a></li>
          <li class="store"><a href="stores.php">By Store</a></li>
          <li class="brand"><a href="brand.php">By Brand</a></li>
        </ul>
      </div>
    so effectivly i have two menus? the current problem is that because both divs are classed as menu they are both 700+ pixels wide and therefor the right hand side menu is underneath the other one?

    do i need to create a new set of css for the new menu or is there another way?

    here is the new css for the right tabs
    Code:
     #menu.item li.item a, #menu.store li.store a, #menu.brand li.brand a{
      background-image:url(images/menu/norm_right2.gif);
    }  
      
    #menu.item li.item, #menu.store li.store, #menu.brand li.brand{
      background-image:url(images/menu/norm_left2.gif);
    }
    thanks
    Luke

  • #14
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    right i think i have solved both issues(think )

    i now have a menu which selects two tabs and looks like it did before, and from what i understand of this i can get the tabs to look disabled by changing the value of the view session to none for example and the create a class for none, this none can be applied to all pages except the main category pages.

    i had to change all my css to allow for the "new" menu.
    for example where my css said #menu da da da i have now had to change it so that it says #menu, #menu_r da da da but it seems to be working. the only problem that i can think of that i may runinto is when i remove the <a> tag from a tab the background images may screw up?

    but im getting there, i think lol
    cheers
    Luke

  • #15
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok 1 very small (i hope) problem, the menu for some reason is adding alot of extra space to the right of my page, causing a scroll bar with no content?

    any one know of any reason why this should be?

    its defo the menu thats causing this to happen as it wasnt there before

    here is the menu css
    Code:
    #menu {
      float:left;
      width:700px;
      background:#DAE0D2 url(../images/menu/bg.gif) repeat-x bottom;
      font-size:13px;
      line-height:normal;
      }
    #menu_r {
      float:right;
      width:240px;
      background:#DAE0D2 url(../images/menu/bg.gif) repeat-x bottom;
      font-size:13px;
      line-height:normal;
      }
    #menu ul, #menu_r ul  {
      margin:0;
      padding:15px 5px 0;
      list-style:none;
      float:left;
      width:708px;
      }
    #menu .right {
    float:right;
    width:220px;
    }
    #menu li, #menu_r li  {
      float:left;
      background:url(../images/menu/norm_left_on.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #menu li:hover, #menu_r li:hover {
      background-image:url(../images/menu/norm_left2.gif);
      }
    #menu a, #menu_r a {
      float:left;
      display:block;
      background:url(../images/menu/norm_right_on.gif) no-repeat right top;
      padding:5px 10px 4px 1px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #menu a, #menu_r a {float:none;background-image:url(../images/menu/norm_right_on.gif);}
    /* End IE5-Mac hack */
    #menu a:hover, #menu_r a:hover {
      color:#333;background-image:url(../images/menu/norm_right2.gif);
      }
    #menu #current, #menu_r #current {
      background-image:url(../images/menu/norm_left2.gif);
      }
      
    #menu #current a, #menu_r #current a {
      background-image:url(../images/menu/norm_right2.gif);
      color:#333;
      padding-bottom:5px;
      }
    #menu.home li.home a, #menu.entertainment li.entertainment a, #menu.computing li.computing a, #menu.electronics li.electronics a, #menu.clothing li.clothing a, #menu.health li.health a, #menu.misc li.misc a{
    background-image:url(../images/menu/norm_right2.gif);
    padding-bottom:5px;
    }
    
    #menu.home li.home,  #menu.entertainment li.entertainment, #menu.computing li.computing, #menu.electronics li.electronics, #menu.clothing li.clothing, #menu.health li.health, #menu.misc li.misc{
      background-image:url(../images/menu/norm_left2.gif);
      }
     #menu_r.byitem li.byitem a, #menu_r.store li.store a, #menu_r.brand li.brand a{
      background-image:url(../images/menu/norm_right2.gif);
    }  
      
    #menu_r.byitem li.byitem, #menu_r.store li.store, #menu_r.brand li.brand{
      background-image:url(../images/menu/norm_left2.gif);
    } 
    .menucontainer{
    float:left;
    width:940px;
    }
    and html
    Code:
    <div class="menucontainer">
    <div id="menu" class="<?php echo $_SESSION['page'];?>">
        <ul>
          <li class="home<?php if($_SESSION['page']=='home') { echo ' selected'; } ?>"><a href="index.php">Home</a></li>
          <li class="entertainment"><a href="entertainment.php">Entertainment</a></li>
          <li class="computing"><a href="computing.php">Computing</a></li>
          <li class="electronics"><a href="electronics.php">Electonics</a></li>
          <li class="clothing"><a href="clothing.php">Clothing</a></li>
          <li class="health"><a href="health.php">Health &amp; Beauty</a></li>
          <li class="misc"><a href="misc.php">Miscellaneous</a></li>
        </ul>
    </div>
    <div id="menu_r" class="<?php echo $_SESSION['view'];?>">
        <ul class="right">
          <li class="item"><a href="#">By Item</a></li>
          <li class="store"><a href="stores.php">By Store</a></li>
          <li class="brand"><a href="brand.php">By Brand</a></li>
        </ul>
      </div>
    </div>
    here is a page to show you what i mean.

    any ideas what might be causing this? (the page validates)
    thanks
    Luke


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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