Skip to main content

Flexible Slide To Top Menu With Jquery

In this tutorial i am gonna tell you about that link through which you can see its description and all stuff containing in it.We almost this kind of Slide menu in college websies or fashion websites. But now this feature is widely used in all websites. Its name is flexible slide to top menu. Looks different and you will amazed after knowing that it contains just css and jquery. It has an awesome response.
We are using some CSS transition for rotating arrow position when we click on item. It is flexible, it mean it has fludic design and adjust according to the screen.When you click the view-port is opened and vice-versa.

Download the Code 


Jquery Code:


This code binds the content into its element.
 var $event = $.event, resizeTimeout;

 $event.special.smartresize  = {
  setup: function() {
   $(this).bind( "resize", $event.special.smartresize.handler );
  },
  teardown: function() {
   $(this).unbind( "resize", $event.special.smartresize.handler );
  },
  handler: function( event, execAsap ) {
   // Save the context
   var context = this,
    args  = arguments;

   // set correct event type
   event.type = "smartresize";

   if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
   resizeTimeout = setTimeout(function() {
    jQuery.event.handle.apply( context, args );
   }, execAsap === "execAsap"? 0 : 100 );
  }
 };

 $.fn.smartresize    = function( fn ) {
  return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
 };
 
 $.Accordion     = function( options, element ) {
 
  this.$el   = $( element );
  // list items
  this.$items   = this.$el.children('ul').children('li');
  // total number of items
  this.itemsCount  = this.$items.length;
  
  // initialize accordion
  this._init( options );
  
 };
The most important part of this plugin is its default option contains :
$.Accordion.defaults        = {
    // index of opened item. -1 means all are closed by default.
    open            : -1,
    // if set to true, only one item can be opened. 
    // Once one item is opened, any other that is 
    // opened will be closed first
    oneOpenedItem   : false,
    // speed of the open / close item animation
    speed           : 600,
    // easing of the open / close item animation
    easing          : 'easeInOutExpo',
    // speed of the scroll to action animation
    scrollSpeed     : 900,
    // easing of the scroll to action animation
    scrollEasing    : 'easeInOutExpo'
};

We initialize the plugin by calling init function.
_init               : function( options ) {
         
        this.options        = $.extend( true, {}, $.Accordion.defaults, options );
         
        // validate options
        this._validate();
         
        // current is the index of the opened item
        this.current        = this.options.open;
         
        // hide the contents so we can fade it in afterwards
        this.$items.find('div.st-content').hide();
         
        // save original height and top of each item    
        this._saveDimValues();
         
        // if we want a default opened item...
        if( this.current != -1 )
            this._toggleItem( this.$items.eq( this.current ) );
         
        // initialize the events
        this._initEvents();
         
    },

Css Code:

First of all in every webpage we design the wrapper style.We assign width of every webpage as 100 so that we adjust the wrapper content as per our requirment.
After that we have a color transition effect when hovering.The line height should be the same as the element height.

.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}
.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}
The span for the arrow is positioned absolutely andwe hide it by setting it outside whose opacity is 0.
.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}
Hope you will like it.

source codrops

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...