SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Menu challenge

    So this is the first project I have finally decided to go full css and drop tables, and I have run into a bit of a problem with the menu I am trying to design.

    www.arcsupport.ca/new

    The cross-browser compatability issues aside (since this is still in very early stages) I am trying to achieve the following:

    Say I navigate to the Philosophie > Expertise section. When not mouseovering the menu I would like a "sticky" effect. Essentially the ul ul li would be visible with the ul ul li:hover style applied to demonstrate that I am "HERE". The challenge comes when I want to browse to another part of the site, when using the menu I would like the "stickied" part to only show when either mouseovered that particular section or when the menu is inactive. In other words when browsing to the "Accueil", "Ressources" or other sections, the stickied "Philosophie" ul ul would disappear.

    Is that question clear? If so, how would I achieve this? Is it possible with pure CSS (my guess is no)? If so\not how should I proceed to reach the desired effect?

    Regards,

    - Mike

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello Mike, welcome to Sitepoint

    I think all you need to do is to add a class to the selected menu item on the different pages.

    So on:
    Philosophie > Expertise

    YOu need to add a class="selected" to the li item you want 'stuck'
    and then add a selector to your :hover states for the selected items.

    Then only on pages where there is a li class="selected" will the menu stick,

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply and the welcome . I actually figured that part out. The challenge comes when I want to browse towards another section, and want my stickied li to hide while hovering over other sections (ie. "Accueil" and "Ressources"). Any thoughts?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    ahh, css selectors can't move up the tree, so you can't make a change to an element effect the parent. But, a pure css solution would be to have the the 'selected' version of a z-index lower than the :hover, :focus states and each menu item taking up the full width of the menu.

    It's difficult because your example requires a transparent background, but you could do it by covering up the 'stuck' menu with the background color of the hovered menu.
    It wouldn't be neat though, I would consider a javascript solution.

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol I thought of a cover up idea but I agree, the transparent background is neat enough to look elsewhere for a solution. Thanks for clearing it up for me, Ill go post on the JS board.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just for interests sake I have a very old demo here that hides the currently selected item when browsing the other items on the list.

    http://www.pmob.co.uk/temp/disjointednavlist1.htm

    As mark said a javascript solution would be more elegant in this case.


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
  •