منو ریسپانسیو جی کوئری با طرح ساده و شیک .
آموزش استفاده
- html
<ul id="cbp-tm-menu" class="cbp-tm-menu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Veggie made</a> <ul class="cbp-tm-submenu"> <li><a href="#" class="cbp-tm-icon-archive">Sorrel desert</a></li> <li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</a></li> <li><a href="#" class="cbp-tm-icon-location">Plum salsify</a></li> <li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</a></li> <li><a href="#" class="cbp-tm-icon-earth">Onion endive</a></li> <li><a href="#" class="cbp-tm-icon-location">Bitterleaf</a></li> <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li> </ul> </li> <li> <a href="#">Pepper tatsoi</a> <ul class="cbp-tm-submenu"> <li><a href="#" class="cbp-tm-icon-archive">Brussels sprout</a></li> <li><a href="#" class="cbp-tm-icon-cog">Kakadu lemon</a></li> <li><a href="#" class="cbp-tm-icon-link">Juice green</a></li> <li><a href="#" class="cbp-tm-icon-users">Wine fruit</a></li> <li><a href="#" class="cbp-tm-icon-earth">Garlic mint</a></li> <li><a href="#" class="cbp-tm-icon-location">Zucchini garnish</a></li> <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li> </ul> </li> <li> <a href="#">Sweet melon</a> <ul class="cbp-tm-submenu"> <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li> <li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</a></li> <li><a href="#" class="cbp-tm-icon-contract">Plum salsify</a></li> <li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li> <li><a href="#" class="cbp-tm-icon-article">Onion endive</a></li> <li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</a></li> </ul> </li> </ul>
- css
/* Iconfont made with icomoon.com */ @font-face { font-family: 'cbp-tmicons'; src:url('../fonts/tmicons/cbp-tmicons.eot'); src:url('../fonts/tmicons/cbp-tmicons.eot?#iefix') format('embedded-opentype'), url('../fonts/tmicons/cbp-tmicons.woff') format('woff'), url('../fonts/tmicons/cbp-tmicons.ttf') format('truetype'), url('../fonts/tmicons/cbp-tmicons.svg#cbp-tmicons') format('svg'); font-weight: normal; font-style: normal; } /* reset list style */ .cbp-tm-menu, .cbp-tm-menu ul { list-style: none; } /* set menu position; change here to set to relative or float, etc. */ .cbp-tm-menu { display: block; position: absolute; z-index: 1000; bottom: 0; width: 100%; background: #47a3da; text-align: right; padding: 0 2em; margin: 0; text-transform: capitalize; } /* first level menu items */ .cbp-tm-menu > li { display: inline-block; margin: 0 2.6em; position: relative; } .cbp-tm-menu > li > a { line-height: 4em; padding: 0 0.3em; font-size: 1.2em; display: block; color: #fff; } .no-touch .cbp-tm-menu > li > a:hover, .no-touch .cbp-tm-menu > li > a:active { color: #02639d; } /* sumbenu with transitions */ .cbp-tm-submenu { position: absolute; display: block; visibility: hidden; opacity: 0; padding: 0; text-align: left; pointer-events: none; -webkit-transition: visibility 0s, opacity 0s; -moz-transition: visibility 0s, opacity 0s; transition: visibility 0s, opacity 0s; } .cbp-tm-show .cbp-tm-submenu { width: 16em; left: 50%; margin: 0 0 0 -8em; opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: visibility 0s, opacity 0.3s; -moz-transition: visibility 0s, opacity 0.3s; transition: visibility 0s, opacity 0.3s; } .cbp-tm-show-above .cbp-tm-submenu { bottom: 100%; padding-bottom: 10px; } .cbp-tm-show-below .cbp-tm-submenu { top: 100%; padding-top: 10px; } /* extreme cases: not enough space on the sides */ .cbp-tm-nospace-right .cbp-tm-submenu { right: 0; left: auto; } .cbp-tm-nospace-left .cbp-tm-submenu { left: 0; } /* last menu item has to fit on the screen */ .cbp-tm-menu > li:last-child .cbp-tm-submenu { right: 0; } /* arrow: depending on where the menu will be shown, we set the right position for the arrow */ .cbp-tm-submenu:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .cbp-tm-show-above .cbp-tm-submenu:after { top: 100%; margin-top: -10px; } .cbp-tm-show-below .cbp-tm-submenu:after { bottom: 100%; margin-bottom: -10px; } .cbp-tm-submenu:after { border-color: transparent; border-width: 16px; margin-left: -16px; left: 50%; } .cbp-tm-show-above .cbp-tm-submenu:after { border-top-color: #fff; } .cbp-tm-show-below .cbp-tm-submenu:after { border-bottom-color: #fff; } .cbp-tm-submenu > li { display: block; background: #fff; } .cbp-tm-submenu > li > a { padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in 'em' cause a tiny "jump" in Chrome on Win */ display: block; font-size: 1.2em; position: relative; color: #47a3da; border: 4px solid #fff; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .no-touch .cbp-tm-submenu > li > a:hover, .no-touch .cbp-tm-submenu > li > a:active { color: #fff; background: #47a3da; } /* the icons (main level menu icon and sublevel icons) */ .cbp-tm-submenu li a:before, .cbp-tm-menu > li > a:before { font-family: 'cbp-tmicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; margin-right: 0.6em; -webkit-font-smoothing: antialiased; } .cbp-tm-submenu li a:before { position: absolute; top: 50%; margin-top: -0.5em; right: 0.5em; } .cbp-tm-menu > li > a:not(:only-child):before { content: "\f0c9"; font-size: 60%; opacity: 0.3; } .cbp-tm-icon-archive:before { content: "\e002"; } .cbp-tm-icon-cog:before { content: "\e003"; } .cbp-tm-icon-users:before { content: "\e004"; } .cbp-tm-icon-earth:before { content: "\e005"; } .cbp-tm-icon-location:before { content: "\e006"; } .cbp-tm-icon-mobile:before { content: "\e007"; } .cbp-tm-icon-screen:before { content: "\e008"; } .cbp-tm-icon-mail:before { content: "\e009"; } .cbp-tm-icon-contract:before { content: "\e00a"; } .cbp-tm-icon-pencil:before { content: "\e00b"; } .cbp-tm-icon-article:before { content: "\e00c"; } .cbp-tm-icon-clock:before { content: "\e00d"; } .cbp-tm-icon-videos:before { content: "\e00e"; } .cbp-tm-icon-pictures:before { content: "\e00f"; } .cbp-tm-icon-link:before { content: "\e010"; } .cbp-tm-icon-refresh:before { content: "\e011"; } .cbp-tm-icon-help:before { content: "\e012"; } /* Media Queries */ @media screen and (max-width: 55.6875em) { .cbp-tm-menu { font-size: 80%; } } @media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) { .cbp-tm-menu { font-size: 100%; position: relative; text-align: center; padding: 0; top: auto; } .cbp-tm-menu > li { display: block; margin: 0; border-bottom: 4px solid #3793ca; } .cbp-tm-menu > li:first-child { border-top: 4px solid #3793ca; } li.cbp-tm-show > a, .no-touch .cbp-tm-menu > li > a:hover, .no-touch .cbp-tm-menu > li > a:active { color: #fff; background: #02639d; } .cbp-tm-submenu { position: relative; display: none; width: 100%; } .cbp-tm-submenu > li { padding: 0; } .cbp-tm-submenu > li > a { padding: 0.6em 2.3em 0.6em 0.6em; border: none; border-bottom: 2px solid #6fbbe9; } .cbp-tm-submenu:after { display: none; } .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu { display: block; width: 100%; left: 0; margin: 0; padding: 0; bottom: auto; top: auto; } }
- javascript
/** * cbpTooltipMenu.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */ ;( function( window ) { 'use strict'; var document = window.document, docElem = document.documentElement; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } // from https://github.com/ryanve/response.js/blob/master/response.js function getViewportH() { var client = docElem['clientHeight'], inner = window['innerHeight']; if( client < inner ) return inner; else return client; } // http://stackoverflow.com/a/11396681/989439 function getOffset( el ) { return el.getBoundingClientRect(); } // http://snipplr.com/view.php?codeview&id=5259 function isMouseLeaveOrEnter(e, handler) { if (e.type != 'mouseout' && e.type != 'mouseover') return false; var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; while (reltg && reltg != handler) reltg = reltg.parentNode; return (reltg != handler); } function cbpTooltipMenu( el, options ) { this.el = el; this.options = extend( this.defaults, options ); this._init(); } cbpTooltipMenu.prototype = { defaults : { // add a timeout to avoid the menu to open instantly delayMenu : 100 }, _init : function() { this.touch = Modernizr.touch; this.menuItems = document.querySelectorAll( '#' + this.el.id + ' > li' ); this._initEvents(); }, _initEvents : function() { var self = this; Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) { var trigger = el.querySelector( 'a' ); if( self.touch ) { trigger.addEventListener( 'click', function( ev ) { self._handleClick( this, ev ); } ); } else { trigger.addEventListener( 'click', function( ev ) { if( this.parentNode.querySelector( 'ul.cbp-tm-submenu' ) ) { ev.preventDefault(); } } ); el.addEventListener( 'mouseover', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._openMenu( this ); } ); el.addEventListener( 'mouseout', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._closeMenu( this ); } ); } } ); }, _openMenu : function( el ) { var self = this; clearTimeout( this.omtimeout ); this.omtimeout = setTimeout( function() { var submenu = el.querySelector( 'ul.cbp-tm-submenu' ); if( submenu ) { el.className = 'cbp-tm-show'; if( self._positionMenu( el ) === 'top' ) { el.className += ' cbp-tm-show-above'; } else { el.className += ' cbp-tm-show-below'; } } }, this.touch ? 0 : this.options.delayMenu ); }, _closeMenu : function( el ) { clearTimeout( this.omtimeout ); var submenu = el.querySelector( 'ul.cbp-tm-submenu' ); if( submenu ) { // based on https://github.com/desandro/classie/blob/master/classie.js el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show" + "(\\s+|$)"), ' '); el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show-below" + "(\\s+|$)"), ' '); el.className = el.className.replace(new RegExp("(^|\\s+)" + "cbp-tm-show-above" + "(\\s+|$)"), ' '); } }, _handleClick : function( el, ev ) { var item = el.parentNode, items = Array.prototype.slice.call( this.menuItems ), submenu = item.querySelector( 'ul.cbp-tm-submenu' ) // first close any opened one.. if( this.current && items.indexOf( item ) !== this.current ) { this._closeMenu( this.el.children[ this.current ] ); this.el.children[ this.current ].querySelector( 'ul.cbp-tm-submenu' ).setAttribute( 'data-open', 'false' ); } if( submenu ) { ev.preventDefault(); var isOpen = submenu.getAttribute( 'data-open' ); if( isOpen === 'true' ) { this._closeMenu( item ); submenu.setAttribute( 'data-open', 'false' ); } else { this._openMenu( item ); this.current = items.indexOf( item ); submenu.setAttribute( 'data-open', 'true' ); } } }, _positionMenu : function( el ) { // checking where's more space left in the viewport: above or below the element var vH = getViewportH(), ot = getOffset(el), spaceUp = ot.top , spaceDown = vH - spaceUp - el.offsetHeight; return ( spaceDown <= spaceUp ? 'top' : 'bottom' ); } } // add to global namespace window.cbpTooltipMenu = cbpTooltipMenu; } )( window );
با تشکر از سایت عالی و مفیدتون
اگر کنار مشخصات فایلها بنویسید که با چه مرورگرهایی کار میکنند ممنون میشم
مرسی یاسر جان چشم حتماً به این مورد هم رسیدگی میکنیم
چند تا آموزش در مورد Jquery.UI دارم تهیه میکنم.
حوصلم نمیگیره تکمیل کنم…
مرسی جواد جان منتظریم
سلام.
بسیار عالی! واقعا از این سایت خوشم اومده و جزء معدود سایتایی هست که برای تشکر ازش کامنت می دم!
امیدوارم دلسرد نشید و ادامه بدید.
یه پیشنهاد:
قابلیت ارسال پست میهمان رو برای سایت بذارید تا از تجربیات بقیه هم مطلع بشیم!(چون این سایت از اون سایتایی هست که بیشتر حرفه ای ها و طراحان وب بهش سر می زنند!)
سلام شما لطف دارین آقا محمد گل . چشم حتماً این کارم انجام میدیم . بازم به سایت سر بزنید
سلام مهدی جان خیلی خودتو سایتتو دوست دارم
می خواستم خواهش کنم یک اموزش برای search برامون بذار
و راستی این سایت رو نگاه کن پس زمینشو جوری ساخته که وقتی زوم می کنیم عکس پس زمینش کوچیک و بزرگ نمیشه
اینم اموزششو بزاری ممنون می شم
سلام رضا جان خیلی لطف داری شما .
چشم حتما
اینم ادرسش
http://livedemo00.template-help.com/wt_38274/index.html#!/
سلام مهدی جان
شما که این سایت به این خوبی رو داری و من هم تو و سایتتو دوست دارم درباره CSS هم یک سایت بزن نوکرتم
سلام رضا جان مرسی , فعلاً که روی همین سایت فوکوس کردیم و برنامه هایی که قرار هست براش پیاده کنیم
سلام مهدی جان خوبی داش
داداش از AJAX هم چند مثال بزار
خیلی نوکرتم
ممنون
سلام مرسی چشم حتماً
Hello
Tanks
dear jim.
wellcom to ijquery .thanks