#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    Trying to make links appear only on specific pages


    I've been googling around for about a day now, without much luck, and hope I can find assistance.

    I have a portfolio website I am working on with a menu of links on the left side of the screen.

    Code:
      <aside class='fixed mainpage big'>
          <h1>
          <a class='dark' href='/comics'>Comics</a>
          </h1>
          <h2 class="hidden">
          <ul id='sidemenu'>
           <a class='light' href='/comics/book1'>
           <li>Book 1</li></a>
           <a class='light' href='/comics/book2'>
           <li>Book 2</li></a>
           <br/>
          </ul>
          </h2>
          <h1>           
          <a class='dark' href='#new'>Illustration</a>
           </h1>
           <h2 class="hidden">
           <ul id='sidemenu'>
           <a class='light' href='#culture'>
           <li class="selected">Pop Culture</li></a>
           <a class='light' href='#commissions'>
           <li>Commissions</li></a>
           <a class='light' href='#sketchbook'>
           <li>From The Sketchbook</li></a>
           <br/>
          </ul>
          </h2>
                <div id='push'></div>
      </aside>
    Now, what I have figured out, is how to have the sub-categories hidden with a css code of

    Code:
    h2.hidden {display:none;}
    but what I would like is when on the Comics page, to be able to see the Book 1 and Book 2 links, and when on the Illustrations page, see the other submenu. I'm not looking for a hover or onClick action, I only want to see the submenus when on the parent page.

    Is there a way to put in a code that recognizes if I'm on index.php and does not show the submenus, and if on illustrations it shows that one only, etc.?

    EDIT: I tried putting sample images to show what I meant, and then links to those images, but it doesn't show them on the final post.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    This is not possible with css only.

    You could use php (or javascript) to detect what page you are on, by using a $_GET variable (or other 'variables') and assigning an extra class to the item you want.
    html
    Code:
    <ul id="menu">
       <li><a href="tralala" class="active">active item</a></li>
       <li><a href="tralala">not active item</a></li>
       <li><a href="tralala">not active item</a></li>
    </ul>
    css
    Code:
    #menu li{display:none} /* in case you have one level */
    #menu.active{display:block}
    P.s. just a note I see you are using the H1 element multiple times, that is not a very good practise.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    It's true it's not possible with CSS to detect what page you're on, but that doesn't mean you can't just manually add a class to the page. For example, on the Comics page you could add a class to the body, i.e. <body class="comics">. Then you need something to uniquely identify your submenu.

    Such as:

    Code:
    <h2 class="hidden comicsMenu">
    Then you just add to your CSS:

    Code:
    .comics .comicsMenu {display: block}
    And in HTML5, using H1 multiple times is acceptable, though typically not multiple times within a single section.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Thanks, I'm going to keep playing with it.

    rdoyle720's idea is working so far, but I need to see how it'll play out since the menu was going to be in an included file.

    Previously, everything that wasn't the actual page content (or rather, everything that's the same on every page) came from a php_include file, which held the body tag in it as well. In this case, I guess I'll have to recode it so the body tag is on the page itself and not included anymore.
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by rdoyle720
    And in HTML5, using H1 multiple times is acceptable, though typically not multiple times within a single section.
    You are right: Point being it should make sense. Using a H1 as a menu item doesn't, just like multiple times within one <section>

    Apart from that I kinda dislike the extra class you use. Although it works. If you are already able to alter the structure of the menu, Why use an extra body class. Depending on the amount of menu items the css file while increase, while a dynamic class prevents this (certainly if all you want is display it or not, without extra menu styling). For example:

    A menu with 5 items: Your solution will end up with 10 classes declared in the stylesheet.

    Code:
    .comics .comicsMenu
    .gorilla .gorillaMenu
    .banana .bananaMenu
    .thisseemsredundant .redundantMenu
    .extraextra .extraMenu
    (not to mention you need to alter your css everytime you get extra items)
    instead of a dynamic class which is added when looped through an array of items

    Code:
    .active{}
    Ah well the TS can choose what he wants, in the end he will have to fiddle in php
    Last edited by aeternus; October 18th, 2012 at 03:27 PM.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    True, it does mean adding extra classes. But considering we're talking about just two submenus, and we're in the CSS forum, it's probably a reasonable answer. Feel free to write up the PHP or Javascript to help the poster out.
    Last edited by rdoyle720; October 18th, 2012 at 03:57 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    aeternus,

    I'm still not sure how to make your method work.

    If I use a php_get to identify the page, how do I make it correspond to the .active list?
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, benthecartoon.

    Originally Posted by aeternus
    Apart from that I kinda dislike the extra class you use. Although it works. If you are already able to alter the structure of the menu, Why use an extra body class. Depending on the amount of menu items the css file while increase, while a dynamic class prevents this (certainly if all you want is display it or not, without extra menu styling). For example:

    A menu with 5 items: Your solution will end up with 10 classes declared in the stylesheet.

    Code:
    .comics .comicsMenu
    .gorilla .gorillaMenu
    .banana .bananaMenu
    .thisseemsredundant .redundantMenu
    .extraextra .extraMenu
    (not to mention you need to alter your css everytime you get extra items)
    I often use this approach myself. In such cases, I want to have page (or site section) specific styles and/or to give item specific styles to multiple top-level navigational menu items. It also doesn't necessarily rely on any server-side or client-side scripting.

    There's more than one valid approach to this. Use the one that is most suitable for your project.

    Originally Posted by rdoyle720
    And in HTML5, using H1 multiple times is acceptable, though typically not multiple times within a single section.
    Yes, but I would not recommend it because not many screen readers, if any, support HTML5 yet, and the traditional (explicit) document outlining model that relies on the level of the headings is very important for people who use screen readers.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by benthecartoon
    aeternus,

    I'm still not sure how to make your method work.

    If I use a php_get to identify the page, how do I make it correspond to the .active list?
    Hi Ben,

    Although indeed both approaches work the dynamic one is a bit more complicated but maybe nice if you have ****loads of menuitems (that share styles). Luckily I had some spare time, so I made a little script you can test it out if you like. (works out of the box, didn't check for optimalisation :P)
    PHP Code:
    <!doctype html>
    <html>
        <head>
            <title>some dynamic menu</title>
            <style type="text/css">
                .submenu{display:none;}
                .active{display:block;}
            </style>
        </head>    
        <body>
    <?php

    /* ###########  a simple dynamic menu with active state for submenu ############# */

    /* a simple array which can be pulled from a database */
            
    $menu_items = array(
                
    'categoryA' => array('a1''a2'),
                
    'categoryB' => array('b1''b2''b3'),
                
    'categoryC' => array('c1''c2''c3''c4'),
            );
     
    // build menu        
            
    echo '<ul id="menu">' PHP_EOL;
            foreach (
    $menu_items as $key => $value) {//loop over menu items
                
    echo '<li><a href="?cat=' $key '">' $key '</a>';
                
    // build sub menu
                
    if (is_array($menu_items[$key])) { // make sure the item is an array before attempting to build a list
                    //check if menu is active and assign class
                    
    if (isset($_GET['cat']) && //check if get value is set
                            
    array_key_exists($_GET['cat'], $menu_items) && //check if the getvalue exists in the menu array
                            
    $key === $_GET['cat']) { //check if the current key is active
                        //get var activated                   
                        
    $visible 'active';
                    } else {
                        
    // no get var
                        
    $visible '';
                    }
                    
    //create list items
                    
    echo '<ul class="submenu ' $visible '">' PHP_EOL;
                    foreach (
    $value as $k => $v) {
                        echo 
    '<li>' $k ' ---- ' $v '</li>' PHP_EOL;
                    }
                    echo 
    '</ul>' PHP_EOL;
                }
                echo 
    '</li>' PHP_EOL;
            }
            echo 
    '</ul>' PHP_EOL;
            
    ?>
        </body>
    </html>
    Have fun!

    P.s. this ofcourse assumes you run this as php on a server.
    Last edited by aeternus; October 18th, 2012 at 04:29 PM.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    Originally Posted by Kravvitz
    Yes, but I would not recommend it because not many screen readers, if any, support HTML5 yet, and the traditional (explicit) document outlining model that relies on the level of the headings is very important for people who use screen readers.
    Good point to keep in mind. Seems to be changing though, I just came across this today:
    "...Jaws 13 supports the h1-only technique in Internet Explorer 9 and Firefox..."
    http://html5doctor.com/your-html5-questions-20/
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by rdoyle720
    Good point to keep in mind. Seems to be changing though, I just came across this today:
    "...Jaws 13 supports the h1-only technique in Internet Explorer 9 and Firefox..."
    http://html5doctor.com/your-html5-questions-20/
    Nice find. I'm glad that at least one major screen-reader will support it soon.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo