Eak No space on my menu.... help

sequencehosting · #1 (**permalink**) 07-04-2009, 05:19 PM

Hello all,

I am a bit stuck because I would like to add new links on my top navigation but there is of course no space left. Would it be possible to turn the existing buttons into a drop down menu? If that were possible it would be great. Please note I love everything about the layout and do not mean change the menu images, I just wish to add some sort of drop down to them. I also do not wish to increase the width of the layout by adding new buttons because it's a good width for a top navigation website.

For example for the 'company' button I could have the following drop down options

- about us
- why us?
- testimonials

I understand some visitors will not be able to see the drop down because they do not have java enabled so I will keep the links how they are now and if a drop down is possible it will give my visitors with java enabled more options and easier navigation.

http://www.igxhost.com/

Here is a great example of what I mean. I already have a JavaScript file which controls the roll over effect on my navigation. I’m guessing I would be able to incorporate the drop down in this file if it's at all possible to do? Bellow is my current JavaScript file.

Quote:

I would love to get this sorted out for future expansion reasons.

My only other option would be to get rid of the domain checker on the top and change it to "client login" this way I can change the client button.

Thanks for any advice and suggestions on this

Jack

sequencehosting · #2 (**permalink**) 07-04-2009, 05:52 PM

I have just found a open source drop down menu here.

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

This just might work. This menu is made up of three files.

* anylinkmenu.js
* menucontents.js
* anylinkmenu.css

Maybe I could add the contents of these files to my existing stylesheet and javascript making sure nothing is repeated.

Im going to give it ago on a test page first.

sequencehosting · #3 (**permalink**) 07-04-2009, 06:04 PM

Here is an example of the menu working

https://www.sequencehosting.com/test/test.php

This looks like it may work but the problem is I need a different drop down for 6 images.

sequencehosting · #4 (**permalink**) 07-04-2009, 06:08 PM

I have just taken a look at the Javascript code and I can see how to set up different drop downs!!

Now I just need to work out how to incorperate this to my existing menu. I need to incorperate the files for this menu into my existing files because last time I had more than 2 stylesheets it didn't work out too well.

sequencehosting · #5 (**permalink**) 07-04-2009, 06:50 PM

It seems to be working!

I just need to do a bit of editing. Scroll over hosting on the main page if you wish to see the drop down.

https://www.sequencehosting.com

Wow im talking to myself but it's fine because this is so exciting!

sequencehosting · #6 (**permalink**) 07-04-2009, 07:41 PM

Wow im surprised how easy this has been to set up. I only have 1 issue at the moment.

1) for some reason I think the style sheets are mixing a bit for the default link style. You can see under the plans is the same as the links on the drop down. Although they should both be using different style sheets. Anyway to fix this? All I need to do is change the text color to black and get rid of the arrows image. The hover is fine so it's a bit strange how that happens. Could it be something to do with the name of the styles?

sequencehosting · #7 (**permalink**) 07-04-2009, 08:11 PM

Problem solved, I added the following styles to the wrong part of the style sheet.

Quote:

color: #FFFFFF;
background: none;

That's all it took to do.

Now im left with one last problem. On some browsers my drop down appears half way down the image and on others it appears perfectly (IE looks perfect, surprisingly

) I would like the menu to appear underneath the menu button like it does in IE not halfway down the button like it does in FF.

I have tried adding a value to top: 0; with no luck. Anyway here is my style sheet for the menu.

Code:

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
background: #78C9F9;
width: 200px;
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
background: none;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #16191B;
color: #FFFFFF;
}

.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

Thanks for any help! I can't wait, so excited!

Jack

kelevraco · #8 (**permalink**) 07-04-2009, 11:44 PM

Wow you have a whole thread here just to yourself. Congrats on getting things worked out though.

James · #9 (**permalink**) 07-04-2009, 11:59 PM

It is good to ask questions; it is also good to answer them yourself! It shows your mind is in gear and producing well for you. Keep up the good work.

sequencehosting · #10 (**permalink**) 07-05-2009, 07:48 AM

Quote:

Wow you have a whole thread here just to yourself. Congrats on getting things worked out though.

Haha yeah I ask always ask the question in advance then try my hardest to resolve it.

Quote:

Originally Posted by James

It is good to ask questions; it is also good to answer them yourself! It shows your mind is in gear and producing well for you. Keep up the good work.

Thanks James, I always attempt things myself before asking for help. I really enjoy every second of this and it's really satisfying figuring something out myself.

The only issue I currently have is with the drop down only showing up half way down the button. All I need to do is get it to show up underneath the button.

I will keep working at it

William Wilson · #11 (**permalink**) 07-05-2009, 10:03 AM

Very interesting posts...Perhaps it is helpful to you to put things down and then look at them again...I know when I study something, I have found this to be very helpful...it seems to put the mind in "another dimension"...Anyhow, I am glad you are getting it resolved...All the best...William Wilson

sequencehosting · #12 (**permalink**) 07-05-2009, 11:17 AM

Quote:

Originally Posted by William Wilson

Very interesting posts...Perhaps it is helpful to you to put things down and then look at them again...I know when I study something, I have found this to be very helpful...it seems to put the mind in "another dimension"...Anyhow, I am glad you are getting it resolved...All the best...William Wilson

Your right William, posting on here motivates me to fix the problem before someone replies. If I cannot fix it I know there is a chance someone will post some advice on here. Thank you, yep just need to figure out how I make the drop down menu appear underneath the image.

Once I figure out this problem it's completely done and I will just have to add options to the drop down.

Then I will get started on some video tutorials.

sequencehosting · #13 (**permalink**) 07-05-2009, 11:45 AM

Thanks for all your support everyone,

I think I have reached my limit with the last hurdle. All I need to do is change the style sheet so the drop down box will appear underneath the button image.

Bellow is the style sheet for the dropdown.

Code:

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
background: #78C9F9;
width: 200px;
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #000000;
background: none;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #16191B;
color: #FFFFFF;
}

.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

I have attached 2 images, one showing how I would like it and the other is showing up half way down the image.

It's strange because Internet Explorer is showing it perfectly where as Firefox is displaying the drop down on the image.

Thanks for any help on this last issue I have.

EDIT: Looks like I can only upload 1 attachment so I have uploaded a screenshot from Firefox which shows how I would not like it to show up.

WB Sponsors