Member Avatar for cgull

Hello,

I am trying to create a menu that slides up when a button is clicked.

I looked at a lot of tutorials of animate and slide but nothing works for me.

I hope someone can help.

What I need is a button that says: Click for Menu and when this button is clicked I need the menu (ul list) to display above the button and on top of the content under it. So I don't want the content to move.

For example:

<div id="content">
Text for content here

<ul class="menu">
    <li><a href="about">A</a></li>
    <li><a href="about">B</a></li>
    <li><a href="about">C</a></li>
</ul>
<a href="#">Click for Menu</a>
</div>

When the Click for Menu link is clicked the menu will slide from the button up above everything.

Hope you understand what I mean.

Can someone please help?

  • 2 Contributors
  • 2 Replies
  • 205 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by cgull
Member Avatar for AleMonteiro

I suggest you use jQuery UI to achieve this, it'll be very easy.

Take a look in this demo, it's almost what you want: http://jqueryui.com/button/#splitbutton

This demo uses 3 jQuery UI feature: Button, Menu and Position.

commented: :) +7
Member Avatar for cgull

Thank you very much, that helped.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.