SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    animated sliding design where to start?

    Knowing little about developing javascript, jquery and ajax from scratch... but... enough to tweak code... i would like to build a site with a similar sliding nav bar and panels as shown here > http://www.porte-sainte-claire.com. Any ideas where i can pick up a tutorial or code (paid or free) to get me started?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I helped someone else in the JS forum earlier this year with a similar project.
    I wrote it up here.

    Maybe that helps you.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, that is beautiful. i did not realize the sample i provided was a single page website; with all elements hidden until activated via js. Is there away to accomplish the same effect when pulling up other pages?

    For instance i want to avoid the use of # (i.e. mysite.com/home.html#link1). I would still like the fluid motion of the sliding panels just via loading off page html without the page refreshing. My url will look like mysite.com/mytopic/mypage. Any ideas?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Tussy View Post
    i want to avoid the use of # (i.e. mysite.com/home.html#link1). I would still like the fluid motion of the sliding panels just via loading off page html without the page refreshing. My url will look like mysite.com/mytopic/mypage. Any ideas?
    Yes, just prevent the link's default action when you click on it.
    The demo in the tutorial I linked to does this.


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
  •