Slide Out Menu Problem

Dev Shed Forums Sponsor:

March 14th, 2003, 03:28 PM

BQ74

Junior Member

Join Date: Mar 2003

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Slide Out Menu Problem

I'm trying to get my drop down menus to line up under their assigned topics regardless of the users resolution, as my page uses a centered table design. (Sorry no example at this point).

I have found a script that does this:
ypSlideOutMenus found at YoungPup.net

He includes an example of a centered menu which calculates the current offset of the top left corner of the drop down menu and then initializes it to specific pixels from there.

My problem is, however, that he only includes an example of one menu item. I would like to know how to alter the code below, so it handles 2 or more menus. I guess im just not javasavee enough to get it to do this.

Code:
____________________________________________________

<html>
<head>
<script language="javascript" src="../ypSlideOutMenusC.js"></script>
<script language="javascript">

var myOffset = -37;
// the number you pass to initLeft doesn't matter since it will get
// changed onactivate
var myMenu = new ypSlideOutMenu("menu1", "down", 0, 25, 180, 200)

myMenu.onactivate = repositionMenu

function repositionMenu()
{
var newLeft = getWindowWidth() / 2 + myOffset;
myMenu.container.style ? myMenu.container.style.left = newLeft + "px" : myMenu.container.left = newLeft;
}

function getWindowWidth()
{
return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
}
</script>
<style type="text/css">
.menuActuator a {
color:#666666;
font-weight:bold;
font-size:12px;
font-family:arial;
}
.menu {
font-family:verdana;
color:#666666;
font-size:10px;
background-color:#cccccc;
layer-background-color:#cccccc;
}
</style>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white">
<table align="center" bgcolor="#CCCCCC" cellpadding="2" cellspacing="0" border="0">
<tr>
<td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1')">menu1</a></td>
</tr>
</table>
<div id="menu1Container">
<div id="menu1Content" class="menu">this is menu 1!</div>
</div>
</body>

-----------------------------------------------------------------------------------

Thanks!

BQ

April 19th, 2003, 12:43 PM

MaxxBass

Junior Member

Join Date: Apr 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

I have the same problem. Can anybody hepl us?

April 19th, 2003, 01:01 PM

mttatkns

Got source?

Join Date: Mar 2003

Location: Laguna Niguel, California, USA

Posts: 2,332

Time spent in forums: < 1 sec
Reputation Power: 9

Why reinvent the wheel? Why not use a premade script like that at www.twinhelix.com?

April 19th, 2003, 04:57 PM

MaxxBass

Junior Member

Join Date: Apr 2003

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

ypSlideOutMenus are much easier to use dynamicly.

October 14th, 2003, 09:45 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

YP Slide Out

I can answer your issues but have a problem with mine. i will say though that it has to be one of the best menus out there.

To answer your issue

var myMenu = new ypSlideOutMenu("menu1", "down", 0, 25, 180, 200)
var myMenu = new ypSlideOutMenu("menu2", "down", 0, 25, 180, 200)
var myMenu = new ypSlideOutMenu("menu3", "down", 0, 25, 180, 200)
var myMenu = new ypSlideOutMenu("menu4", "down", 0, 25, 180, 200)

etc then at the bottom of the page you should have

<div id="menu1Container">
<div id="menu1Content" class="menu">this is menu 1!</div>
</div>

just copy and paste this info and change the numbers according to what you have above for example

<div id="menu2Container">
<div id="menu2Content" class="menu">this is menu 2!</div>
</div>

I hope it helps, if you play around wit it, you can achieve pretty much anything and you dont need to touch the js files.

October 21st, 2003, 09:41 AM

Hotlink Lady

Registered User

Join Date: Oct 2003

Posts: 13

Time spent in forums: 28 m 20 sec
Reputation Power: 0

ypSlideOutMenu Problem

Has anyone resolved this issue? I too need help.

I've tried proy01 advice and still did not work. To view a sample of my code click here.

Any help would be appreciated.

- Hotlink Lady

October 21st, 2003, 10:15 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Slide Out Menus

Are you triggering the menus via a text link or an image, as you need to adjust your other links and number them accordingly with my previsouly posted info. for example

<a href="this is the actual trigger link details" onmouseover="ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu2')"><img name="your image link" src="/path to your imagelink" width="x" height="x" border="0" alt="">

there are only 3 places to include another menu. make sure you change the location of the menu at the top of the page.

Let me know if i can help further

October 21st, 2003, 10:17 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Slide Out Menu

To see one of the sites ive done with it goto

http://www.domecomputers.co.uk

October 21st, 2003, 10:50 AM

Hotlink Lady

Registered User

Join Date: Oct 2003

Posts: 13

Time spent in forums: 28 m 20 sec
Reputation Power: 0

nice site using ypSlideOutMenu

Nice site proy01! Probelm is your layout is aligned left. My design is fluid and the navigation should move with the layout rather than being sedentary.

I'm also having an issue with swap image. The Nav is a jpg and I'd like to swap image onMouseOver but ypSlideOut consumes that event. Can you think of an alternate way to hadle the swap image?

Thanks for the input.

- Hotlink Lady

#10

October 21st, 2003, 11:00 AM

Hotlink Lady

Registered User

Join Date: Oct 2003

Posts: 13

Time spent in forums: 28 m 20 sec
Reputation Power: 0

Have a look see

I am using image links have a look at my code on this forum: http://forums.devshed.com/t92562/s.html

- Hotlink Lady

#11

October 21st, 2003, 11:19 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

slide.....

I have used the ypslideout a few times centrally and left aligned. im not sure you can get it to mouse over as ive tried a few times but i think it needs a static image. the only way i think that you could get it to work would be to assigned it to a CSS buttons, if you want ill show you some examples but would need to pm you as i dont want my urls splashed all over these forums.

Did you get your other problem sorted?

Whats the link to your site?

#12

October 21st, 2003, 11:25 AM

Hotlink Lady

Registered User

Join Date: Oct 2003

Posts: 13

Time spent in forums: 28 m 20 sec
Reputation Power: 0

Images swapped

I've got the image swap thing worked out as followed :

Quote:

I still cannot get the menu to move with the layout.

- Hotlink Lady

#13

October 21st, 2003, 11:29 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

menus

I think i need to see an example of what you mean, if its what i think you mean, i would put the whole lot in a table and centre it on the page that way it will move around.

Let me know

#14

October 21st, 2003, 11:36 AM

Hotlink Lady

Registered User

Join Date: Oct 2003

Posts: 13

Time spent in forums: 28 m 20 sec
Reputation Power: 0

have a look see

Have a look see

I have posted my code here: http://forums.devshed.com/t92562/s.html

- Hotlink Lady

#15

October 21st, 2003, 11:41 AM

proy01

Registered User

Join Date: Oct 2003

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

menu

I had a look at that and whilst i understand youre going to have it centered it doesnt really throw much light onto the bigger picture.

I need to see a file that isnt working so i can have a look and fix it. let me know if you want me to have a look.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: