Results 1 to 5 of 5

Thread: CSS Popup Menu

  1. #1
    Join Date
    Oct 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Popup Menu

    Need some assitance with how they created their main popup menu using CSS at projectseven.com site:
    http://www.projectseven.com

    I need the menu to have the same effects, perhaps modifying the colors, and possibly having it go horizontal across the top. What is important as well is that it has a breadcrumb effect in which it displays the bar you previously linked to.

    If anyone can show me some free code for this that would be great!

    Thanks as always.

  2. #2
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    421
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi

    Looks like they are using a dreamweaver package called Tree Menu Magic Dynamic CSS Menu Kit see http://www.projectseven.com/viewer/index.asp?demo=tmm for more details.

    Or take a look at the free scripts on Dynamic Drive that can offer very similar viewing and flexibility.

    http://www.dynamicdrive.com/dynamicindex1/index.html

    rgds,Simonf

  3. #3
    Join Date
    Dec 2004
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i put this code in the head, uploaded the files, but the menu doesnt show.

  4. #4
    Join Date
    Dec 2004
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    nevermind it worked

  5. #5
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Popup Menu

    HTML Code:

    <span class="popup">
    Menu Title
    <span class="items">
    <a href="#">Popup Item #1</a><br />
    <a href="#">Popup Item #2</a><br />
    <a href="#">Popup Item #2</a>
    </span>

    </span>



    CSS code:

    .popup .items { display: none }

    .popup:hover > .items {
    display: block;
    font-size: 80%;
    border: gray solid thin;
    background-color: white;
    position: absolute;
    z-index: 1;
    }

    .popup .items a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    }

    .popup .items a:hover { color: blue }

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
  •