SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontally slide menu on click

    Hi Guy's,

    I don't really know javascript and normally just download scripts off the internet, but i can't find anything for what i want to do.

    I have a side menu (ul) and i want this to slide to the other side of the screen (from right sidebar to left sidebar) onclick of a certain menu item.

    How can i do this so that it will slide across and then load the page?

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so what I need to do is have a script that will animate a div (with ul inside or just the ul) to make it move across the screen from right to left when they click 1 of the menu items that contain a submenu and then load the clicked page after the animation.

    Would this be possible and how?

  3. #3
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps with a JQuery script that you can animate?

    For example a div that you can slide/animate from right to left:
    http://api.jquery.com/animate/

    If you know how to do that, JQuery will rock your ***

    Or based on a simple slide javascript like this ?

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm i think the jquery solution would be best, however would I be able to make the page load after the animation as it would be for menu link?

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course,

    But than you have to make 2 jquery functions:
    1 that does the animation
    1 that shows the menu at the position where it finally should stay

    The first function can be triggered by an id on your first page.
    If you click on a link in the menu, it loads another page where this trigger isn't mentioned anymore.

  6. #6
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmmmm I cant seem to get it to work.

    I notice in the demo's they have a button to trigger the animation, whereas I have a link maybe this is why?

  7. #7
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make an id in your link. If this ID exists, trigger the function. Something like this:

    var trigger = document.getElementById("trigger");
    trigger.onclick = function youranimation();

  8. #8
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bulevardi,

    Sorry for the long delay, I have been on holiday.

    Ok im trying to do this animation in joomla and so it has no unique ID, however it does have a unique class (ul .menu > li .parent item6 > a > span).

    Anything I try to do does nothing im really stuck on this one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •