Drop-Up On Hover Menu

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I need a menu (Like I have as my drop down menu), where you hover over the link, it would drop UP instead of down. It would be nice if the solution is CSS only, but if it involves JavaScript, than I guess I'll live with it... This menu would be generated automatically (Dynamically with PHP).
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Hmmm...I would think you already know about script.aculo.us, cause you can definitely do all kinds of crazy tish with that, combine functions to make a menu fade and shrink to a zero point at the same time, the same thing backward, set the length in seconds of the effect, etc, all really damn simply. I am just waiting for "vortex", "puzzle" and "shatter" functions.

But you are now talking both barrels: javascript :roll:
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

http://script.aculo.us/

The one you want is class BlindUp:
Quote:
Scales the x dimension of element to 0 percent with contents of element anchored at the top, like window blinds. After finishing, element is hidden
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

mk27 wrote:
oops.
Oops what? I don't get that
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Bogey wrote:
mk27 wrote:
oops.
Oops what? I don't get that


Sorry, I hit reply instead of edit, but you can't delete a post. Usually this board is slow and I always add stuff after I post and go "hmmm"; anyway, scroll back up and look where the oops used to be.

Have you really never heard of script.aculo.us? That's crazy. It could be like I'm turning you on to psychedelic drugs :mrgreen:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I might have visited that site once, and probably forgot about it. Thanks for reminding me about it.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Bogey wrote:
I might have visited that site once, and probably forgot about it. Thanks for reminding me about it.


It does require prototype, too. It works and it really ain't any harder than this:
Code: [ Select ]
 
new Effect.Shrink($('dropout'), { duration: 1.5 });
 
  1.  
  2. new Effect.Shrink($('dropout'), { duration: 1.5 });
  3.  


I should do a tutorial for this, methinks.

Here's BlindUp/BlindDown in action:

http://206.251.36.107/simple/

all I wrote was the page source you see there. You will have to do some playing around to get it to work nicely with "onmouseover" maybe.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Thanks :D That was great help except it didn't work... the problem with that is that it works, but only inside of that div which is 97% wide and 40px wide... it's basically a bar at the bottom similar to Facebook or MySpace that holds the chat and online friends... what I need this pop-up menu for is the online friends thing...
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Take a look through some of these

http://www.cssplay.co.uk/menus/

There are some that go up instead of down, like this one http://www.stunicholls.com/menu/skeleton_up.html
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Bogey wrote:
Thanks :D That was great help except it didn't work... the problem with that is that it works, but only inside of that div which is 97% wide and 40px wide... it's basically a bar at the bottom similar to Facebook or MySpace that holds the chat and online friends... what I need this pop-up menu for is the online friends thing...


You could look into the underlying functions used; BlindUp is a combination effect using combinations of more basic things (like "Scale"), but you should be able to look through the effects.js and figure it out. Can't say I have tried myself tho, and I'm not sure how the script.aculo.us docs are in this regard.

My tactic with that stuff is to have just *one* div for the whole bar, and swap the contents since you are only going to view one drop down at a time; ie the same div goes up and comes down again with different content. But that's a stylistic choice; if you're trying to emulate something specific I guess you would have to find out how that is specifically done.

grinch2171 wrote:
Take a look through some of these

http://www.cssplay.co.uk/menus/

There are some that go up instead of down, like this one http://www.stunicholls.com/menu/skeleton_up.html


That second one looks good but I hope the guy responsible for the first one isn't also responsible for propagating this set of mistakes all over of the web, cause I see it everyday -- which just goes to show, you should really test stuff in more than one browser, etc:
Image
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

What browser are you using. According to his info on that menu
Stu nicholls wrote:
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Safari (iPod Touch). Mozilla and Netscape in Firefox mode have a small problem with this one, as does the latest alpha release of Opera.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

@grinch2171: I didn't find any menus there that work :( this is getting to be frustrating.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

None worked at all or they won't work with what you are wanting to do?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Check My Site... you will see the bar at the bottom... that is where I want that pop-up menu... I had one working there, but it would only show inside that bottom div and the top absolutely positioned div would cover the rest...

Z-INDEX wouldn't work then no matter what I would do, and so I gave up on it... this is becoming a little frustrating.

Thanks for your help so far guys!
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

grinch2171 wrote:
What browser are you using. According to his info on that menu
Stu nicholls wrote:
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Safari (iPod Touch). Mozilla and Netscape in Firefox mode have a small problem with this one, as does the latest alpha release of Opera.


That's not the stu nicholls one unless they are both by the same guy.

The screenshot is from firefox 3.0.4 Fedora Core 10-64.
Bogey wrote:
Check My Site... you will see the bar at the bottom... that is where I want that pop-up menu... I had one working there, but it would only show inside that bottom div and the top absolutely positioned div would cover the rest...

I don't see it. Why do need a pop-up anyway? Your site seems fine.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Do you not see the gray bar at the bottom? The one that doesn't scroll when you scroll? I need it there.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

They are both the same guy.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

grinch2171 wrote:
They are both the same guy.

What is the same as what?

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.