Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

Thread: Horizontal menu

  1. #1
    Join Date
    Aug 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Horizontal menu

    Hi, first time on the forum so first of all HI!
    Im looking for a horizontal Tab menu like this one http://www.thecrossings.cc/

    Its exactly what Im after but I cant seem to find it or a tutorial on how to achieve it can someone help me please!

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    There's one on this site actually... Granted, you may have to edit the images to fit your design, but the general idea is the same.

    http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Aug 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks, Ive seen these but they dont appear to be the same. The ones Im after would have other tabs....I mean like a sub menu? the ones on this site simply have text and a link....Im not sure Im explaining properly.....When I hover over the tab I need there to be like a sub menu....Can I do this with the examples on this site and how would I go about that?

    cheers

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    the menu on that site "the crossings" is simply a tab menu with "textual links" as a submenu beneath it. This can be easily accomplished with the tabbed menus which I linked to on this site. Notice the description which pops up under the menu you when you hover over the tabs? That can be changed to text links or whatever you want. To achieve the look of that site, I would recommend the second variation of the tabbed menu on this site, it would be the closest to resembling what you're trying to achieve.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Aug 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ok thanks, Ill experiment...but what about this...isnt this more like the one Im after?

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

  6. #6
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    As far as already having the "links" as a submenu yes. If you know a little bit about CSS then you could easily change the background colors into background images and so forth to accomplish the end result. I was just showing you the example which already used images.

    Not trying to be belittling, just didn't know your skill level to start with.

    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  7. #7
    Join Date
    Aug 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Dont worry I didnt take it that way, and my skill level isnt too good at all!

    Im trying to implement the menu but its not working, it works for the first example, using the html and attaching the ddtabmenu.css file.

    How do I get my example to work, the one I want to choose, if I attach the corresponding css it doesnt take effect.

  8. #8
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    do you have a demo page uploaded which we can view? If not, could you post the CSS along with the HTML which you are having trouble with?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  9. #9
    Join Date
    Aug 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    sorry...no demo page...here is the html....and below the css... I havent touched this code, just trying to implement it before I modify.It has to be some really stupid mistake on my part...

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento sin t&iacute;tulo</title>
    <script type="text/javascript">
    //SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
    ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
    </script>
    </head>

    <body>
    <div id="ddtabs1" class="basictab">
    <ul>
    <li><a href="http://www.dynamicdrive.com" rel="sc1">Home</a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" rel="sc2">DHTML</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="sc3">CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
    </ul>
    </div>
    <DIV class="tabcontainer">

    <div id="sc1" class="tabcontent">
    Sub contents here
    </div>

    <div id="sc2" class="tabcontent">
    Sub contents here
    </div>

    <div id="sc3" class="tabcontent">
    Sub contents here
    </div>

    </DIV>
    </body>
    </html>
    ........................................................................................................

    .glowingtabs{
    float:left;
    width:100%;
    line-height:normal;
    border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
    }

    .glowingtabs ul{
    list-style-type: none;
    margin:0;
    margin-left: 5px; /*Left offset of entire tab menu relative to page*/
    padding:0;
    }

    .glowingtabs li{
    display:inline;
    margin:0;
    padding:0;
    }

    .glowingtabs a{
    float:left;
    margin:0;
    margin-right: 5px; /*spacing between each tab*/
    padding:0 0 0 9px;
    text-decoration:none;
    background-image: url(media/glowtab-left.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }

    .glowingtabs a span{
    float:left;
    display:block;
    background:url(media/glowtab.gif) no-repeat right top;
    padding: 5px 12px 3px 3px;
    font-weight:bold;
    color:#3B3B3B;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .glowingtabs a span {float:none;}
    /* End IE5-Mac hack */

    .glowingtabs a:hover span {
    color: black;
    }

    .glowingtabs a.current{ /*Selected Tab style*/
    background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
    }

    .glowingtabs a.current span{ /*Selected Tab style*/
    background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
    color: black;
    }

    .glowingtabs a:hover{ /*onMouseover style*/
    background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
    }

    .glowingtabs a:hover span{ /*onMouseover style*/
    background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
    }

    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }

    .tabcontent{
    display:none;
    }

  10. #10
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Ok, here is an example for you... You can also download the entire thing in a zipped folder...

    Example Page:
    http://www.m-pulsedesigns.com/Testin...ddtabdemos.htm

    Zipped Folder:
    http://www.m-pulsedesigns.com/Testing/ddtabmenu.zip
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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
  •