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!
Printable View
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!
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
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
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.
Ok thanks, Ill experiment...but what about this...isnt this more like the one Im after?
http://www.dynamicdrive.com/dynamici...seovertabs.htm
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.
:)
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.
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?
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í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;
}
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