#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    3
    Rep Power
    0

    css and active menu


    hello,

    I wasn't sure how to get things going, and it ended up in a disaster (like myself), but to the point, I put an exemple beneath:

    text1
    text2
    text3
    text4

    As you see, when someone hits the second link on the menu, it gets another color, when he's viewing that page... That's how I would like it to become, but i can't figure it out!

    Some help is really appreciated

    Greetzz
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    178
    Rep Power
    12
    javascript...like this...

    // Names of the sections...
    var names = new Array;
    names[0]='Content';
    names[1]='Blog';
    names[2]='Admin';

    function activeTab(now){
    for (i=0;i<names.length;i++){
    //change styles of things...you can use lots of css in here to change the properties of things...
    document.getElementById(names[i]).style.background='#B8B8B8';
    }
    //activeTab here...
    document.getElementById(now).style.background='#ececec';
    }

    be sure to call things up on the links...

    <div id="Content" class="navoff"><a href="yourlink" onclick="activeTab('Content');" onmouseout="this.blur();">Content</a></div>

    <div id="Blog" class="Blog"><a href="yourlink" onclick="activeTab('Blog');" onmouseout="this.blur();">Blog</a></div>

    <div id="Admin" class="navoff"><a href="yourlink" onclick="activeTab('Admin');" onmouseout="this.blur();">Admin</a></div>

    try it out...you'll see how it works...

    good luck!...v
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you can do it with adding a class current,

    Code:
    css:
    #menu li a {
    	background:#11bbff;
    	color:#000000;
    }
    
    #menu li.current a{
    	background:#ACC4D0;
    	color:#000000;
    }
    
    
    
    html:
    	<ul id="menu">
    		<li><a href="index.html">Home</a></li>
    		<li class="current"><a href="faq.html">FAQ</a></li>
    		<li><a href="links.html">Links</a></li>
    		<li><a href="about.html">About</a></li>
    	</ul>
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I like to use a common navbar in all pages. I give each link its own id, eg.

    <a id="page3" ...
    <a id="page4" ...

    Then, in each page, embed a style declaration like;

    #page3 {color: green;}

    This will recolor the link to the page you're on. My favorite is to make the link disappear. For example, if you're on the "aboutus" page, the link to "aboutus" does not appear.

    #aboutus { display: none; }

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    3
    Rep Power
    0
    Thank you all for your early reply!

    The javascript did work, but there's one thing, I just want to change the color of the link, and if I change style.background into style.color, it doesn't change... I think this is weird, or else I'm making a big mistake?

    This is the code:

    <script name="javascript">
    // Names of the sections...
    var names = new Array;
    names[0]='Whatsup';
    names[1]='Shoutout';
    names[2]='Pictures';

    function activeTab(now){
    for (i=0;i<names.length;i++){
    //change styles of things...you can use lots of css in here to change the properties of things...
    document.getElementById(names[i]).style.color='white';
    }
    //activeTab here...
    document.getElementById(now).style.color='#894A20';
    }
    </script>

    HTML-code:

    <div id="Whatsup"><a href="#" onclick="activeTab('Whatsup');" onmouseout="this.blur();">What's up</a></div>
    <div id="Shoutout"><a href="#" onclick="activeTab('Shoutout');" onmouseout="this.blur();">Shout out</a></div>
    <div id="Pictures"><a href="#" onclick="activeTab('Pictures');" onmouseout="this.blur();">Pictures</a></div>

    Thank you!

    Greetings

    Pieter
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I guess I'm just not romantic. I don't understand the love affair with using javascript to "write" simple html and css.

    In the links menu:
    Code:
    <ul>
    
      <li><a id="one" href="page_one.html>Page 1</a></li>
    
      <li><a id="two" href="page_two.html>Page 2</a></li>
    
      <li><a id="three" href="page_three.html>Page 3</a></li>
    
      <li><a id="one" href="page_one.html>Page 1</a></li>
    
    </ul>
    Then each page has this;
    Code:
    <html>
      <head>
        <title>Page 1</title> <!--or Page 2, etc. -->
        <style type="text/css">
          #one /*  or #two or #three,etc */ {color: green;}
        </style>
      </head>
      <body>
    ... <!-- menu code -->
          <li><a id="one" href="page_one.html>Page 1</a></li>
    ...
      </body>
    <html>
    What could be simpler? The link associated with a given page gets a new color. If you're using some type of include with a menu file, this is ideal. If you're coding the menu into each page, do as Akh suggested. Use simple text in place of an <a> element (why confuse the visitor with a self referrent link?) with a class designator;
    Code:
    html--
    
      <li class="current">page 1</li>
    
    css--
    
    .current {color: red;}
    In one method, the menu is common to all pages and the style is individualized. In the other the style is common and the menu is varied.

    The simpler you keep it, the easier to maintain.

    cheers,

    gary
    Last edited by kk5st; December 19th, 2003 at 09:25 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    3
    Rep Power
    0
    I tried those, but they did not work actually, because I only use one index page. I work with include (php). The visitor should just know where he's is at that moment, as the text of the link for that page is in another color, but you can't do this by putting it on every page itself... I just include the other pages, so they are only text-based, and there is just only one menu of course...



    <?php
    switch($show)
    {
    case "news":
    include("navnews.php");
    break;
    ......

    <a href="index.php?show=news"...


    Maybe I misunderstood, but yeah, I'm not perfect..
    I thought there was a solution for this, by using css and/or javascript... Hopefully you understand what I'm trying to explain...

    Greets

    Pieter
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    As you see, when someone hits the second link on the menu, it gets another color, when he's viewing that page... That's how I would like it to become, but i can't figure it out!
    Study my examples. Probably the first example is the better for you.
    but you can't do this by putting it on every page itself... I just include the other pages, so they are only text-based, and there is just only one menu of course...
    That's exactly what I do. Give each anchor tag in the menu file an ID. In the head of each target page, insert the style declaration.

    If you can't make that work, you may have some things to rethink.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo