SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS based submenu, selected item to be highlighted

    Greetings all,
    I'm stuck while coding a website and hoping someone can help me out. Thanks in advance.
    Please take a look at the image


    captured from http://www.ilogistixs.com/phoenix-ar...marketing.aspx

    I would like to have same kind of effect for the submenu items ie When a menu item is selected(clicked) it should be highlighted.

    Now the catch is, for my website when a item of submenu is clicked the main url at address bar will not change. anchor links will be placed within the content of the same page. As a click on item should bring up the content as well as highlight the item.

    for example: url bar may look like this. http://abc.com/aboutus.html#mission

    I have attached a basic framework of HTML and CSS (test.zip)to demonastrate how my webpage will be.

    If it can be done in HTML/CSS will be great. Not much aware of PHP or ASPX.
    However if it cannot be done trough purely HTML & CSS, I will really appreciate if some one can provide the other solution.

    Thanks
    Attached Files Attached Files
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You should use javascript to add a class to the clicked link, and remove that class from all other links.

    Using jQuery, assuming all sub menu links have a class submenu, it would be

    Code javascript:
    $(".submenu").click( function() {
      $(".submenu").removeClass("submenuActive");
      $(this).addClass("submenuActive");
    });

  3. #3
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    You should use javascript to add a class to the clicked link, and remove that class from all other links.

    Using jQuery, assuming all sub menu links have a class submenu, it would be

    Code javascript:
    $(".submenu").click( function() {
      $(".submenu").removeClass("submenuActive");
      $(this).addClass("submenuActive");
    });
    Thank you ScallioXTX.

    I understand your logic, however I'm not much familiar with JavaScript/jquery. Tried to implement the idea however not been able to get the result. It would be very kind to have a look at the files again i have attached. i must be be doing some silly mistake which I'm unable to determine. Thanks for your help.

    Best Regards,
    Attached Files Attached Files
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  4. #4
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please have a look at the attached files. done as per the reply i received. But still can't see the item is highlighted when it is clicked. Must be some silly mistake at my side. However I'm not able to figure out. Thank you for your help.

    Regards

    PS: i figured that last zip attached is wrong(dont know if i can delete that)
    Attached Files Attached Files
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This is prob better done with jquery as previously showed. But if you can't figure that out here is a nice old school js method.

  6. #6
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by EricWatson View Post
    This is prob better done with jquery as previously showed. But if you can't figure that out here is a nice old school js method.
    Thanks you EricWatson, you saved my life .The Old type Js looks simple, easy to execute and working.

    As a learner just curious to know what is wrong with the code for jquery one.

    Thank you all for your valuable time.

    Regards
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by radiant_luv View Post
    As a learner just curious to know what is wrong with the code for jquery one.
    Nothing wrong with it, it's just that the jQuery library is 24KB, which is kind of overkill if you're only going to use it for menu highlighting.
    Using plain ol' javascript is better for that.
    So, purely for the sake of bandwith usage I'd say.

  8. #8
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Nothing wrong with it, it's just that the jQuery library is 24KB, which is kind of overkill if you're only going to use it for menu highlighting.
    Using plain ol' javascript is better for that.
    So, purely for the sake of bandwith usage I'd say.
    Thanks. please correct my understanding if wrong, as the code size is so less it is unable to execute?

    Regards
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  9. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by radiant_luv View Post
    please correct my understanding if wrong, as the code size is so less it is unable to execute?
    Oh no the code will execute alright.
    All I'm saying is that using jQuery to highlight the menu is like using a tank to shoot a bug. You could do it, but it's really overkill.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by radiant_luv View Post

    As a learner just curious to know what is wrong with the code for jquery one.
    The jquery one wasn't working because you omitted the link to the jquery library in your html.

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $(".buttons a").click(function() {
        $(".buttons a").removeClass("selected");
        $(this).addClass("selected"); 
      });
    });
    
    </script>
    You were also styling only :link which mean that :visited wouldn't get styled.

    Just use a.selected.
    Code:
    a.selected {
        color:#000;
        text-decoration: none;
        background:#ff0000;
    }
    Anchors aren't self closing and you need to to do it like so:
    Code:
    <a name="tier1"></a>
    However you would be better of removing the named anchors and using an id on the headings instead for the same effect.
    e.g.
    Code:
    <h4 id="tier2">Tier 2</h4>
    The jquery method avoids having onclick attributes in your html as it handles this unobtrusively and keeps the html clean although as mentioned it is rather overkill for that one small job.

  11. #11
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Just use a.selected.
    Code:
    a.selected {
        color:#000;
        text-decoration: none;
        background:#ff0000;
    }
    That doesn't work correctly in some older versions of IE. To make sure it works correctly in all browser you need to use

    Code:
    a.selected, a.selected:link, a.selected:active, a.selected:visited, a.selected:hover {
        color:#000;
        text-decoration: none;
        background:#ff0000;
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    That doesn't work correctly in some older versions of IE. To make sure it works correctly in all browser you need to use

    Code:
    a.selected, a.selected:link, a.selected:active, a.selected:visited, a.selected:hover {
        color:#000;
        text-decoration: none;
        background:#ff0000;
    }
    Only needed if you have previously defined the pseudo link classes and there are conflicts to resolve.

    In the original code there was no conflict and would work fine in Ie6 upwards.

    Code:
    a:link, a:visited {
        color:#000;
    }
    a.selected {
        color:#000;
        text-decoration: none;
        background:#ff0000;
    }
    The color is the same and background was not defined previously so there will be no conflict and it will work fine

    However you are right to be careful as IE6 does give more weight to the pseudo classes than it should.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Also this is one of those cases where I might be tempted to use !important instead.

    e.g.

    Code:
    a.selected {
        color:#000!important;
        text-decoration: none;
        background:#ff0000!important;
    }
    Rather than using all this:
    Code:
    a.selected, a.selected:link, a.selected:active, a.selected:visited, a.selected:hover {
     etc..
    However !important needs to be used with great care as it can cause more problems than it solves.

  14. #14
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Paul O'B;4581207]The jquery one wasn't working because you omitted the link to the jquery library in your html.

    Oh no. That was very silly of me. I din't realize i missed the important link.

    Thank you.

    It's working good now. Thank you all for your valuable time.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by radiant_luv View Post

    Now the catch is, for my website when a item of submenu is clicked the main url at address bar will not change. anchor links will be placed within the content of the same page. As a click on item should bring up the content as well as highlight the item.
    Glad that you have something working now but I have to ask if you are going about this the best way.

    It's not generally a good idea to have your whole site as one page for many reasons. If you are just flipping through a few short sentences then a hide and show effect is ok but if you are displaying a page of content each time then you would be better off with a proper site and call up a different page each time and avoid the need for any JS at all.

    This would improve accessibility and also aid seo at the same time. Having a one page site is akin to using "Frames" and we all know what happened to them

    I may have got the wrong impression from the short amount of code you posted but I thought (was prompted) that I should say something.

    Also in the code you posted there was not a correct page structure and no doctype etc but I guess that wasn't the full code - just a snippet. Make sure you use all the html elements that you are supposed to including the doctype or you will run into problems with IE.

  16. #16
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Glad that you have something working now but I have to ask if you are going about this the best way.

    It's not generally a good idea to have your whole site as one page for many reasons. If you are just flipping through a few short sentences then a hide and show effect is ok but if you are displaying a page of content each time then you would be better off with a proper site and call up a different page each time and avoid the need for any JS at all.

    This would improve accessibility and also aid seo at the same time. Having a one page site is akin to using "Frames" and we all know what happened to them
    Thank you Paul O'B;4582004 for pointing this out. I shouldn't have said "Website" rather appropriate might be a html 'Page". Yes you are right, this will be for a page for the website, there will be few paragraph of content. A click on left side will get the right paragraph up for the user.

    Quote Originally Posted by Paul O'B View Post
    I may have got the wrong impression from the short amount of code you posted but I thought (was prompted) that I should say something.

    Also in the code you posted there was not a correct page structure and no doctype etc but I guess that wasn't the full code - just a snippet. Make sure you use all the html elements that you are supposed to including the doctype or you will run into problems with IE.
    Yes, I do have doctype in the actual page. I thought just to create prototype snippet rather that pasting the entire actual code.

    It's great to get this kind of feedbacks.

    Have a Happy Weekend.
    Last edited by radiant_luv; May 1, 2010 at 05:17. Reason: spell correction
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's not generally a good idea to have your whole site as one page for many reasons. If you are just flipping through a few short sentences then a hide and show effect is ok but if you are displaying a page of content each time then you would be better off with a proper site and call up a different page each time and avoid the need for any JS at all.
    Thank you for putting that WAY more politely than I was likely going to.


Bookmarks

Posting Permissions

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