Horizontal menu [Archive] - Dynamic Drive Forums

africano

08-06-2008, 09:59 PM

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!

TheJoshMan

08-06-2008, 10:03 PM

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

africano

08-06-2008, 10:35 PM

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

TheJoshMan

08-06-2008, 10:42 PM

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.

africano

08-06-2008, 11:03 PM

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

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

TheJoshMan

08-06-2008, 11:08 PM

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.

:)

africano

08-07-2008, 01:53 AM

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.

TheJoshMan

08-07-2008, 01:55 AM

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?

africano

08-07-2008, 01:59 AM

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;
}

TheJoshMan

08-07-2008, 02:37 PM

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/Testing/ddtabmenu/ddtabdemos.htm

Zipped Folder:
http://www.m-pulsedesigns.com/Testing/ddtabmenu.zip

africano

08-07-2008, 05:26 PM

Thank you very much! Im going to start trying to work it out, thanks again hopefully I wont take long to figure it out!

Cheers

africano

TheJoshMan

08-07-2008, 05:28 PM

no problem... I have no life anyway. LOL

Just Kidding, but glad to help

africano

08-07-2008, 06:11 PM

By the way do you know where I can download some TAB button images? I know I can always make/draw them myself but I wouldnt mind having some ready made ones to look at and either modify or recreate.

TheJoshMan

08-07-2008, 06:14 PM

for something like that, Google (http://google.com) is your friend...

Also, you could search for them on deviantART.com (http://www.deviantart.com) under "Resources"

TheJoshMan

08-07-2008, 07:01 PM

Ah, I totally forgot about this site... It's got a BUNCH of free menu resources.

http://www.pixelys.com/2008/02/13/rounded-dropline-tab-dropdown-menu/

africano

08-08-2008, 03:57 PM

cheers, I love the site, loads of nice menus...but how can I save them on my pc?? I cant seem to save/download them....

TheJoshMan

08-08-2008, 04:14 PM

well, on google... if you find tab images you like, just right click and "save as".

On deviantART if you find tab images you like, there will be a "menu" area on the left of the image that will say "download".

On Pixelys, you'll have to register a new account (it's free)... Then you can log in and view whichever menu you like, down below it will be a download link for the psd.

africano

08-13-2008, 10:23 PM

Hi, Ive got some menus I would like to use, now Im trying to adapt them to the menu example you gave me.....Would I open the menus in photoshop and slice the images to obtain the different state images required??
Hope you understand me!

The thing is that in the psd sources from the site you recommended there are loads of different layers...active tab, selected tab, hover tab....top bar bottom bar etc.....can these imgs be adapted to the example you showed me?

TheJoshMan

08-14-2008, 03:31 AM

I can't really answer that question without first knowing EXACTLY which menu PSD you are trying to use. There are several on the site I recommended which could be used with a little work, but there are also several which just wouldn't work with the code I gave you, for those you would have to completely rewrite the css to suit.

africano

08-14-2008, 12:13 PM

Hi, thanks, this is the menu Id like to use.......can it be used with the example and if so what modifications would I need to make?

http://www.pixelys.com/2008/02/27/rounded-gradient-dropline-tabs/

TheJoshMan

08-14-2008, 02:28 PM

yes that menu would work with the code you already have... It would take minimal adjustments. I'll take a look at it more when i get off work.

africano

08-14-2008, 04:34 PM

ok thanks, appreciate it!

africano

08-16-2008, 10:14 AM

Hi, have you had a chance to have a look at it? Ive been trying but not sure how to proceed....

TheJoshMan

08-16-2008, 05:49 PM

Sorry it took so long to get back to you, I nearly cut my finger off at work yesterday... So typing has been a little difficult... LOL

Anyway, I've finished slicing and coding the menu you that you want to use. I only had time to slice and code three color variations of it, so all you have to choose from is Brown, Purple, and Blue.

Also, before you use these menus in ANYTHING you need to ensure that you read Pixelys License Agreement (http://www.pixelys.com/license-agreement/) very carefully. I sliced and coded these menus for you under the impression that you were going to use them in accordance with Pixelys License Agreement (http://www.pixelys.com/license-agreement/), and therefor cannot be held liable/responsible if you should decide to break those terms set forth between you and Pixelys (http://www.pixelys.com/).

Now that I have all the pseudo-legalese out of the way, below is a link to a live demo of the three color variations of the menu that I sliced and coded for you.

Enjoy!

Demo Link:
http://www.eight7teen.com/Tabbing_Test/Demo.html

Download Link:
http://www.eight7teen.com/Tabbing_Test.zip

TheJoshMan

08-17-2008, 06:08 PM

Well? Is that what you were looking for?

africano

08-26-2008, 04:14 PM

Hi, yeah it is. Ive been busy but Im trying to get it to work with my current layout. ive managed to get it working but the sublinks dont appear to work.
Ive setup a test url so if you have time please can you have a look. Im going for the Blue tabbed menu and therefore Ive tried to get rid of the rest of the code that doesnt apply to that specific menu....maybe Ive gotten rid of something which makes the sublinks appear as they dont seem to work... anyways have a look if you have time.

one last thing.....are the color variations done in css or is it just a matter of changing the image colors in Photoshop? Just curious incase I want to change color....
cheers and thanks a lot for the interest youve put in so far to helping me,
Jose.

TEST:http://www.elchevirtual.com/Personaltrainer/
CSS:http://www.elchevirtual.com/Personaltrainer/glowtabs.css

http://www.elchevirtual.com/Personaltrainer/ddtabmenu.js

TheJoshMan

08-26-2008, 06:19 PM

yes, the color changing would need to be done with photoshop... I'll take a look at it when i get off work

africano

08-26-2008, 07:05 PM

Ok, Im comfortable with photoshop so I could probably figure that out. Its just that the sublinks arent working.
Another question....It appears (to my eyes) to be very big in size, would this be changed changing the font or would I have to change the image sizes?

This is not really important stuff, sorry if I seem like an idiot! The most important thing for me is to get the sublinks working!:)

Cheers!

TheJoshMan

08-26-2008, 09:17 PM

As far as the menu looking "big", you could adjust the background position of the images to make them shorter, but you would also have to equally adjust the height of the container they are in. Changing to font size would help quite a bit too. I fixed your issue with the submenus not showing up.

http://www.eight7teen.com/Tabbed_Menu_Help.zip

africano

08-27-2008, 02:46 PM

Hi, thanks but could you specify what youve done? Ive got the files and Im trying to figure out what youve done to fix it....Although its not really fixed... My site is centred in the screen and not fully across like you have it.

What needs changing...sorry for the hassle...

cheers

Jose.

africano

08-27-2008, 05:15 PM

Oh this is driving me crazy....I cant seem to see why it doesnt work....:confused:
Maybe its an issue with the amount of space underneath the menu...I really dont know..

TheJoshMan

08-27-2008, 07:51 PM

how could it not be working? I downloaded your entire site, images, scripts, css and all... I fixed the problem, put it in a zipped folder (the entire site) and uploaded to my server. If you downloaded the zipped folder then you should have a fixed menu.

The reason your submenus weren't working is because you weren't "initializing" the menu.
Also, you were using a ".htm" file rather than ".html"

That script won't work properly without a ".html" extension.

africano

08-28-2008, 03:08 PM

Your zipped file works....but its not centred on the screen like my original design...its spread across the whole screen......

Here you can see I have a centred design: http://www.elchevirtual.com/Personaltrainer/

........My script is initialized here: <script type="text/javascript" src="ddtabmenu.js">

/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

And I believe my index file is index.html......but as you say there must be an error somewhere in there, I just cant see it!

TheJoshMan

08-28-2008, 07:00 PM

My script is initialized here: <script type="text/javascript" src="ddtabmenu.js">

/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

That's not "initializing" the menu. That merely "calls" the script.

This:

<script type="text/javascript">
//Blue Menu//
ddtabmenu.definemenu("ddtabs4", 0)
</script>

initializes the menu...

africano

08-28-2008, 07:59 PM

Oh ok, I didnt mean to sound rude by the way!:) It was more a question!

I still cant get it to work! Any ideas¿?

I really do apreciate the help!!!

If you can have a look Id apreciate it!

Jose.