SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Senior Webdesigner koolbrian's Avatar
    Join Date
    Dec 2000
    Location
    Mauritius
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS trees menu w/ color options

    Hi to all,
    Ok let's get straight to the point. It's quite hard to explain, but i'll try my best.first of all, see this image:



    I want a dynamic system for this navigation vertical menu. Ok. First you should know that My navigation is as sub-divised as follows:
    Studio
    - Our Profile
    - Our Mission
    - Contact Us

    Services
    - What we offer
    - Production
    - Rates

    Portfolio
    - Showcases
    - Templates for sale


    I want a CSS style, which allows me when:
    1. Mouse overed on the "studio" ( for exemple ) to change the color of the box where its written "studio" to purple for instance, but also change the color of the vertical actual orange bar to purple...
    2. When clicked on the "studio" box, to drop down, like a tree menu, the 3 sub links ( Our Profile, Our Mission, Contact US )
    As this image shows...



    I hope to be clear enough. I am looking a bit of this kind of menu: http://www.projectseven.com/tutorial...1_ldeluxe.htm#
    i am really optimizing this webpage for search engine placement, so I thought CSS would be much better, less bothering than Javascript to search engine, especially that Javascript would take hours to load on a 56k modem. I would be very VERY very hyper grateful if you could be of any help to me. Would it be possible to place the css in an external style sheet, as far as the navigation is concerned ?
    Thankyou again
    Please move this thread to the appropriate forum if it's not well placed here, because I understand it's pure programming...
    Take Care
    Kind Regards
    Brian Dove
    BrianStudio - the webdesign company
    Professional & Affordable
    Brian Dove - Senior Graphic Designer
    Direct Hire: info@brianstudio.com

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

    I'm sorry that I dont have time to code this for you as it would take all day

    If you want a lightweight expanding menu then have a look here for an unobtrusive style expanding menu.

    http://www.gazingus.org/html/menuExpandable.html

    While you will be able to swap colours on your bar to purple you can only get a hover effect with css and not a persistent effect. You would need to dynamically script the change of color somehow. You will of couse need some method of alternative navigation for non js enabled browsers (if you are concerned about this) such as having the menu opened fully if js is disabled.

    The easiest solution overall is just to click on the link and go to a page with the menu opened and the bar coloured already. Obviously this is a bit long winded to get to a sub menu and does depend on page weight in how long it takes.

    You could use the expanding script I linked to but you'd also need to add in a class/id change to change the colour of the bar as well.

    Sorry I couldn't offer more assistance but it will take more than just css to accomplish.

    Maybe someone else will have better ideas

    Paul

  3. #3
    Senior Webdesigner koolbrian's Avatar
    Join Date
    Dec 2000
    Location
    Mauritius
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    thanks for your help, greatly appreciated. Ok, lets forget the color bar change, ill do that after i read my book of CSS "Cascading Style Sheets: The Definitive Guide, 2nd Editionby Eric A. Meyer" By the way, is it a good book ? Or is the sitepoint CSS book better "HTML Utopia: Designing Without Tables Using CSS"

    Lets forget the bar for now. The script you sent me, is it enabled for most browsers ?
    Thank-you in advance,
    Brian Dove
    BrianStudio - the webdesign company
    Professional & Affordable
    Brian Dove - Senior Graphic Designer
    Direct Hire: info@brianstudio.com

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

    Both books are good to have and both have their good and bad points but you can't go far wrong with either of them. However most of your css will still be learned a bit by trial and error because how things should work and how they do work is sometimes a litlle confusing lol.
    The script you sent me, is it enabled for most browsers ?
    Most modern browsers should be ok with it but if you set up so the menu is expanded if js is disabled etc then you should be ok anyway. Browse the site for more info as the menu came from a recommendation I read in in Zeldman's book.

    There are other scripts about so have a look and play around. These drop down menus are often quoted : http://www.htmldog.com/articles/suckerfish/dropdowns/ and are worth a look at also as they use minimal unobtrusive js for ie only. Other modern browesrs work without any scripting needed at all.

    Paul


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
  •