jQuery: creare un tour del sito per WordPress
Possiamo creare un tour del sito per WordPress utilizzando un effetto lightbox e delle semplici tecniche di manipolazione del DOM fornite da jQuery.
Creare un tour del sito per WordPress con jQuery è semplice se si risolve il problema principale del reperimento dei dati del sito. Nel nostro esempio tali dati vengono presi dai menu di navigazione principali e riorganizzati come un diagramma ad albero. Ovviamente questa soluzione può essere enormemente superata dall’utilizzo di AJAX in combinazione con XML o JSON. Quello che vorrei sottolineare da un punto di vista dell’usabilità è che un tour del sito non dovrebbe essere automatico, ma si dovrebbe lasciare all’utente la possibilità di decidere. Vediamone insieme i dettagli.
Struttura del DOM
jQuery andrà a creare la seguente struttura:
|
1 2 3 4 5 6 7 8 |
<div id="overlay"></div>
<div id="site-tour">
<!--contenuto dei menu-->
<a href="#" id="close-tour">Chiudi</a>
</div>
<a href="#" id="tour-button">Tour del sito</a>
</body>
</html> |
Andremo infatti a creare un effetto lightbox associando le azioni di apertura e chiusura sui due link.
Codice CSS
Ecco il codice CSS del demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/*= Site tour */
#site-tour {
width: 800px;
background: #fff;
padding: 1em;
border: 0.6em double #ccc;
border-radius: 6px;
position: absolute;
z-index: 2;
display: none;
}
#tour-button {
width: 50px;
height: 250px;
display: block;
text-indent: -1000em;
background: url(images/tour.png) no-repeat;
position: fixed;
left: 0;
top: 50%;
margin-top: -125px;
}
#site-tour #close-tour {
width: 100px;
background: #c30;
color: #fff;
text-decoration: none;
border: none;
padding: 4px 0;
text-align: center;
position: absolute;
top: -2.1em;
right: -0.5em;
border-radius: 4px 4px 0 0;
font-weight: bold;
}
#site-tour #main {
float: left;
width: 40%;
padding-left: 2em;
padding-top: 1em;
}
#site-tour #categories {
float: right;
width: 40%;
padding-right: 2em;
padding-top: 1em;
}
#site-tour ul ul {
padding-left: 2.5em;
}
#site-tour #main li,
#site-tour #categories li {
margin-bottom: 0.5em;
padding-left: 35px;
background: url(images/doc.png) no-repeat 0 0;
font-size: 1.2em;
font-family: Palatino, Georgia, serif;
min-height: 26px;
}
#site-tour #main > li:first-child {
background: url(images/home.png) no-repeat 0 0;
}
#overlay {
position: absolute;
top: 0;
left: 0;
background: #333;
display: none;
} |
main e categories sono i due menu di navigazione che andranno clonati e inseriti nel contenitore principale del lightbox.
Codice jQuery
Ho parlato di menu al plurale, ma è logico che se il vostro sito ha un solo menu o i dati delle pagine sono contenuti in altri elementi dovrete utilizzare gli elementi messi a disposizione dal vostro tema.
Ecco il codice:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
(function($) {
$(function() {
var SiteTour = new function() {
var mainMenu = $('#menu-main'),
secMenu = $('#menu-utility-navigation'),
wrapper = $('<div id="site-tour"/>').html('<a href="#" id="close-tour">Chiudi</a>'),
layer = $('<div id="overlay"/>'),
button = $('<a href="#" id="tour-button"/>').text('Tour del sito');
var _populate = function() {
button.appendTo('body');
layer.css({
width: $(document).width(),
height: $(document).height(),
opacity: 0.6
}).appendTo('body');
wrapper.css({
top: ($(document).height() / 2) - 900,
left: ($(document).width() / 2) - 450
}).insertAfter('#overlay');
var copyMainMenu = mainMenu.clone();
var copySecMenu = secMenu.clone();
copyMainMenu.attr({id: 'main', 'class': ''});
copySecMenu.attr({id: 'categories', 'class': ''});
copyMainMenu.appendTo('#site-tour');
copySecMenu.appendTo('#site-tour');
};
var _handle = function() {
$('#tour-button').click(function(event) {
$('#overlay, #site-tour').slideDown(500);
event.preventDefault();
});
$('#close-tour').click(function(event) {
$('#overlay, #site-tour').slideUp(500);
event.preventDefault();
});
};
this.init = function() {
_populate();
_handle();
};
}();
SiteTour.init();
});
})(jQuery); |
Abbiamo clonato i due menu e abbiamo resettato i loro attributi id e class. Questa operazione è fondamentale per evitare che gli stili del nostro tema si vadano a sovrapporre a quelli del nostro esempio. Quindi abbiamo inserito le copie nel contenitore del lightbox.
Demo
Download
Nessun commento. Aggiungine uno!
I commenti sono chiusi.