WebBugs: 2014

I just tried my hands on creating a sliding push menu using css.

Keeping this really simple, I have just prepared basic demos for left and right sliding and push menus.

Left Sidebar

HTML Markup

   
<div id="wrapper">
 /*
 "chkController" is used to control the sliding of the navigation menu.
 This will be hidden
 */
 <input type="checkbox" name="chkController" id="chkController" />
 
 /* Your navigation menu goes here */
 <ul id="nav">
  <li>...</li>
 </ul>
 
 /* Site contents goes here */
 <div id="main">
  
  /* This is the label for the hidden checkbox "chkController" */
  <label id="lblController" for="chkController">
   Click Me
  </label>
 </div>
</div>

CSS

   
    
/* Positing the left menu */
#nav{
 margin:0px;
 width:150px;
 height: 500px;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
}

/* Hiding the checkbox */
#chkController{
 display:none;
}

/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
 transform: translateX(150px);
 -ms-transform: translateX(150px);
 -webkit-transform: translateX(150px);
}

Right Sidebar

HTML Markup remains the same as the markup for left sidebar.

CSS

   
    
/* Positing the right menu */
#nav{
 margin:0px;
 width:150px;
 height: 500px;
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
}

/* Hiding the checkbox */
#chkController{
 display:none;
}

/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
 transform: translateX(-150px);
 -ms-transform: translateX(-150px);
 -webkit-transform: translateX(-150px);
}

You can download the demo here.

P.S. : These demos uses CSS3, this example is not supported by IE. Thanks for having a look :)

Have a lot of internal links on the page? Annoyed of jumping to position by using a and # ?

How about adding a small jQuery code to have a smooth scrolling and create a better effect on the visitors web experience.

jQuery has an animate function that can animate various elements including the scroll.

We can use internal links to jump to various positions on the web page using the below code

    
<a href="#myid">Go to My Div<a/>
<div id="myid">My Div<div/>

The problem with the above stated code is, this will jump to a postion, which does not create a good web experience and the visitor may lose track of the position on the page.

Below is a small jQuery code that will fetch all the anchors [a tag] of the page and add a smooth scroll effect when the user clicks on the anchor and scroll to the different position on the web page and visiton can also keep track on where on page is it positioned

    
$(function(){
 /* Fetch all the anchors having internal links */
 /* bing a click event */
 $("a[href^='#']").click(function(e){
  /* Stop the default action of the link */
  e.preventDefault();
  
  /* Get the target from the link */
  var target = this.hash;
  
  $target = $(target);
  
  $("html, body").animate({ scrollTop: $target.offset().top }, 700,function(){
   window.location.hash = target;
  });
 });
});

Demo

Home | About Us | Contact Us

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor augue, suscipit nec egestas non, consectetur sit amet velit. Morbi adipiscing dolor id ante interdum tristique. Praesent volutpat risus sem, at lobortis massa consequat ut. Cras leo diam, blandit non tellus id, porttitor lacinia metus. In semper suscipit nisl, quis tempus est auctor sed. Sed a convallis felis, laoreet feugiat elit. Pellentesque faucibus ipsum vel erat aliquam laoreet. Quisque fringilla gravida orci. Etiam sodales dolor at molestie dignissim. Donec laoreet vestibulum est non ultrices.

Aenean interdum egestas erat ac hendrerit. Vivamus at vestibulum neque, nec ullamcorper mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae bibendum nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris molestie mattis nulla, eu pharetra nulla mollis posuere. Quisque vestibulum leo eget consequat sagittis. Donec vestibulum imperdiet nisi nec imperdiet. Integer cursus justo nec elementum malesuada. Aliquam tellus odio, faucibus nec tristique nec, mattis eu lorem. Mauris hendrerit pharetra massa eu elementum. In mattis volutpat pulvinar. Duis diam nisl, tincidunt non diam in, vehicula adipiscing massa.

Integer scelerisque nibh ut magna iaculis, sit amet ultrices risus varius. Sed ac congue nisl. Aliquam erat volutpat. Morbi eget cursus erat. Duis volutpat dolor malesuada dignissim congue. Proin dictum quam volutpat iaculis elementum. Aenean sapien magna, rutrum id imperdiet vitae, mattis at quam. In vitae convallis arcu, sed tristique mi. Duis quis ultricies augue. Cras massa erat, iaculis nec sollicitudin vitae, tempus sed metus. Phasellus auctor, lacus in facilisis congue, dui neque bibendum diam, quis pulvinar lorem velit vel odio.

Top

About Us

Top

Contact Us

Top

You can download the demo here.

Thursday, 17 July 2014

Push Sliding Menu Using CSS

Friday, 17 January 2014

Smooth animated scroll for internal links using jQuery

Home

About Us

Contact Us