SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS dropdown menu help?

    Hi,

    I've put together a nifty little dropdown menu for my site with what I already know about CSS and some online tutorials, which i'm very pleased with:

    HTML Code:
    <html>
    <head>
    <title>CSS Menu Test</title>
    </head>
    <style>
    body {font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #FFFFFF;
    font-size: 11px;}
    
    #navigator {background-color: #FFFFFF;
    margin-top: 100px;
    width: auto;
    margin-left: 43.5%;
    margin-right: 43.5%;
    text-align: left;
    padding: 8px;}
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    </style>
    <body bgcolor="#FFFFFF">
    <div id="navigator"> 
      <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
      <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
      <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Property</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> 
    </div>
    </body>
    </html>
    Now I do like this, but was wondering if someone could point me in the way of some online tutorials.

    What I want to to is create 'submenu' kind of like this one when the buttons are clicked on:

    http://www.dynamicdrive.com/dynamici...witchmenu2.htm

    Which is done in Javascript, but I want to use CSS. I know it can be done as this site does it with css:

    http://www.aylesburyunited.co.uk/

    Does it, so can anyone let me know of a good tutorial/thread on this forum or just advise how I can go about doing this?

    Many Thanks

    Chris

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should really use lists for your menus, it makes things alot easier. Also I think what you're talking about something like the "suckerfish" drowdowns. Just google "suckerfish drowdown menu" and you should find the link or you can do a search here at sitepoint, its been discussed before.

    If you can't find anything let me know. When I get off work I'll help you out more on my computer at home. I don't have the link here at work.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I doubt that this is possible with pure CSS. If you view the source of that page, they are using JavaScript.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BluDragon
    I doubt that this is possible with pure CSS. If you view the source of that page, they are using JavaScript.
    Yeah I don't think it is possible with just "pure" css. But the suckerfish dropdowns use very little javascript.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •