CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Trying to make links appear only on specific pages


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 18th, 2012, 11:39 AM
benthecartoon benthecartoon is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2012
Posts: 3 benthecartoon User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 32 m 50 sec
Reputation 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.
Reply With Quote
  #2  
Old October 18th, 2012, 02:05 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
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.
__________________
PHP Tutorial
Reply With Quote
  #3  
Old October 18th, 2012, 02:42 PM
rdoyle720 rdoyle720 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Dec 2003
Posts: 644 rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level) 
Time spent in forums: 2 Weeks 3 Days 3 h 5 m 53 sec
Reputation Power: 400
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.
Reply With Quote
  #4  
Old October 18th, 2012, 03:05 PM
benthecartoon benthecartoon is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2012
Posts: 3 benthecartoon User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 32 m 50 sec
Reputation 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.
Reply With Quote
  #5  
Old October 18th, 2012, 03:19 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
Quote:
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.
Reply With Quote
  #6  
Old October 18th, 2012, 03:42 PM
rdoyle720 rdoyle720 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Dec 2003
Posts: 644 rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level) 
Time spent in forums: 2 Weeks 3 Days 3 h 5 m 53 sec
Reputation Power: 400
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.
Reply With Quote
  #7  
Old October 18th, 2012, 03:43 PM
benthecartoon benthecartoon is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2012
Posts: 3 benthecartoon User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 32 m 50 sec
Reputation 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?
Reply With Quote
  #8  
Old October 18th, 2012, 04:17 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,830 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 16 h 39 m 44 sec
Reputation Power: 4192
Welcome to DevShed Forums, benthecartoon.

Quote:
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.

Quote:
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. I'm available for hire at Dynamic Site Solutions.

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).
Reply With Quote
  #9  
Old October 18th, 2012, 04:21 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
Quote:
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.
Reply With Quote
  #10  
Old October 18th, 2012, 04:40 PM
rdoyle720 rdoyle720 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Dec 2003
Posts: 644 rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level)rdoyle720 User rank is Major (30000 - 40000 Reputation Level) 
Time spent in forums: 2 Weeks 3 Days 3 h 5 m 53 sec
Reputation Power: 400
Quote:
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/
Reply With Quote
  #11  
Old October 18th, 2012, 11:17 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,830 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 16 h 39 m 44 sec
Reputation Power: 4192
Quote:
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.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Trying to make links appear only on specific pages

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap