dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: slide in slide out navigation bar in each page

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    59

    slide in slide out navigation bar in each page

    Hello,

    How to create a navigation bar that will changes position in every page? I means, in homepage the position is at the bottom, then when we click another link, open another page, the position will change to the top. But, I will show using slide in / slide out effects. which we can see the movement from top to bottom and so on. just like this page : agencexy.com. and it also responsive. Is it possible to be done only by using CSS? Help me.

  2. #2
    Join Date
    Sep 2013
    Posts
    221
    Try out with the below example, it has worked finr for me:

    /* CSS */
    ul {
    background:red;
    margin-top:-90px;
    transition: 1s;
    }
    ul li {
    transition: 1s;
    }
    input[type=checkbox] {
    position: absolute;
    top: -999px;
    left: -999px;
    }
    input[type=checkbox]:checked ~ ul {
    margin-top:0px;
    }
    label {
    display:block;
    width:100%;
    height:20px;
    }

    /* HTML (for demo) */
    <input type="checkbox" id="toggler">
    <ul id='dropDown'>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Second to last one</li>
    <label for="toggler"><li>Last one</li></label>
    </ul>
    <div>Other content</div>

    hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles