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.
This code binds the content into its element.
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:
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
Post a Comment
your Comment is sent for moderation, Thankyou