pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Come creare un menu tooltip con i CSS3 e jQuery

Nel tutorial creeremo un menu che cliccando su una voce della lista, apre un sottomenusottoforma di tooltip. Il sottomenu apparirà sopra o sotto il menu principale a seconda dellaquantità di spazio disponibile. Grazie all’utilizzo di Modernizr, il menu funzionerà sia conl’evento click che hover. Grazie alle media queries, verranno applicati degli stili specifici perdispositivi con schermi più piccoli.

Il codice HTML123

<ul id="cbp-tm-menu" class="cbp-tm-menu"> <li> <a href="#">Home</a>

PREVIOUS

RANDOM

WEB DESIGN 16 views 0 comments0 likes

by Valentina N on November 22, 2013

11

⚏ CATEGORIE ☰

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Il codice CSS

3456789

10111213141516171819202122232425262728293031323334353637383940

<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</ <li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</ <li><a href="#" class="cbp-tm-icon-location">Plum salsify</ <li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</ <li><a href="#" class="cbp-tm-icon-earth">Onion endive</ <li><a href="#" class="cbp-tm-icon-location">Bitterleaf</ <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</ </ul> </li> <li> <a href="#">Pepper tatsoi</a> <ul class="cbp-tm-submenu"> <li><a href="#" class="cbp-tm-icon-archive">Brussels sprout</ <li><a href="#" class="cbp-tm-icon-cog">Kakadu lemon</ <li><a href="#" class="cbp-tm-icon-link">Juice green</ <li><a href="#" class="cbp-tm-icon-users">Wine fruit</ <li><a href="#" class="cbp-tm-icon-earth">Garlic mint</ <li><a href="#" class="cbp-tm-icon-location">Zucchini garnish</ <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</ </ul> </li> <li> <a href="#">Sweet melon</a> <ul class="cbp-tm-submenu"> <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</ <li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</ <li><a href="#" class="cbp-tm-icon-contract">Plum salsify</ <li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</ <li><a href="#" class="cbp-tm-icon-article">Onion endive</ <li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</ </ul> </li></ul>

123456

/* 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( url('../fonts/tmicons/cbp-tmicons.woff') format('woff'

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

6789

101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

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 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 {

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

54555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899

100101102

.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;}

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150

} /* arrow: depending on where the menu will be shown, we setthe 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;

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198

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 {

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246

.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 {

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294

.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 .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; }

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Il codice Javascript

294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326

} .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; } }

123456789

1011

/** * 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 ) {

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

11121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

;( 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 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

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

5960616263646566676869707172737475767778798081828384858687888990919293949596979899

100101102103104105106107

// add a timeout to avoid the menu to open instantly delayMenu : 100 }, _init : function() { this.touch = Modernizr.touch; this.menuItems = document.querySelectorAll( '#' + this._initEvents(); }, _initEvents : function() { var self = this; Array.prototype.slice.call( this.menuItems ).forEach( var trigger = el.querySelector( 'a' ); if( self.touch ) { trigger.addEventListener( 'click', function } else { trigger.addEventListener( 'click', function if( this.parentNode.querySelector( 'ul.cbp-tm-submenu' ev.preventDefault(); } } ); el.addEventListener( 'mouseover', function el.addEventListener( 'mouseout', function(ev) { } } ); }, _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 ) {

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155

_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( el.className = el.className.replace(new RegExp( el.className = el.className.replace(new RegExp( } }, _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 this._closeMenu( this.el.children[ this.current ] ); this.el.children[ this.current ].querySelector( } 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;

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Fonte di questo tutorial: http://tympanus.net/codrops/2013/05/23/tooltip-menu/

155156157158159160161162163

return ( spaceDown <= spaceUp ? 'top' : 'bottom' ); } } // add to global namespace window.cbpTooltipMenu = cbpTooltipMenu; } )( window );

DETAILS

TutorialTIPOLOGIA

Valentina N

Lavora come Web designer & Web marketing da alcuni anni ed è specializzata nella realizzazione di siti

web, template per browser e client di posta, banner, temi WordPress, ecc... Le sue competenze

riguardano: HTML, CSS, jQuery, Adobe Photoshop, Adobe Illustrator, WordPress ed altro.

✉

CSS, Html, Tutorial

css3 html menu

MORE GOODNESS TUTORIAL

Come scrivere sul web

1 3

♥ 0 likes

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

GraficAzzardo Informazioni Meta Seguici anche su:

Name

E-mail

Website (optional)

Comment

POST

Tutorial Adobe Photoshop CS6: Come creare delle tabelle dei prezzi

Tutorial Adobe Illustrator: Creare delle icone a forma di nastro

BE THE FIRST TO COMMENT! LEAVE A REPLY »

✎ LEAVE A RESPONSE  

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

GraficAzzardo.it

GraficAzzardo.it è un'idea di EugenioFontana e Dario Calonaci.Qualsiasi forma di riproduzionecopia o duplicazione dei contenutirichiede la citazione della fonte.Tutti i diritti sono infatti riservati.

Home

Chi siamo

Diventa un autore

Contattaci

Sitemap

Privacy Policy

Log in

Entries RSS

Comments RSS

WordPress.org

Follow @graficazzardo

Follow Sign Up to see w ho your friends are follow ing.