Css dock-menu
Nella guida č spiegato come realizzare un
css dock-menu. In
questo forum č possibile trovare un esempio del menů.
CITAZIONE
Si consiglia di trovare un servizio che permette la creazione di uno spazio personale e
hosting di file .js o CSS, ad esempio possiamo usare
altervista.
Per prima cosa scarichiamo il file
css-dock-menu.zip, terminato il download apriamo il file e usiamo la voce
Extract salviamo tutto in una cartella
(Si consiglia di creare una cartella momentanea per inserire i file).Nel file scaricato troviamo le seguenti voci:
- images: E' una cartella che contiene alcune immagini tra qui lo sfondo del menů e il body della pagina web;
- js: E' una cartella che contiene lo script per il funzionamento del menů;
- iepngfix: File;
- style: E' un file che contine il CSS;
- css-dock: File index;
Ora bisogna caricare
tutto nel nostro spazio web, se si vuole č possibile usare il programma
filezilla altrimenti dobbiamo hostare tutto manualmente dal nostro panello di controllo.
CITAZIONE
Per chi vuole usare il css dock-menu in uno spazio web esterno č naturale che il file deve essere inserito nel vostro Index o se si vuole č possibile usare anche quello presente del file .zip
Una volta caricato tutto possiamo personalizzare al meglio il nostro menů e la nostra pagina web.
Se si vuole personalizzare l'immagini:Usiamo editor del nostro panello di controllo sulla pagina
css-dock.html troviamo questo:
HTML
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#" target="_top"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#" target="_top"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
Da li č possibile modificare immagini, modificarle le voci e inserire i link di collegamento.
NB: Quando si inserisce l'iframe, la pagina linkata si apre all'interno della stessa pagina. se si vuole far aprire una nuova finestra nel file
css-dock.html, bisogna aggiungere questo:
Oppure questo (se vogliamo che si apra nella stessa pagina)
Il risultato č questo:
HTML
<a class="dock-item" href="#" target="_blank"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
Usiamo editor del nostro panello di controllo sulla pagina
style.css troviamo questo:
CODICE
body {
background: #ffffff url('images/main-bg.gif');
padding: 0;
margin: 0; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Arial, Helvetica, sans-serif
}
Usiamo editor del nostro panello di controllo sulla pagina
style.css troviamo questo:
CODICE
.dock-container {
position: absolute;
height: 50px;
background: url('images/dock-bg2.gif');
padding-left: 20px
}
Usiamo editor del nostro panello di controllo sulla pagina
style.css troviamo questo:
CODICE
}
a.dock-item {
display: block;
width: 40px;
color: #FFF;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
Usiamo editor del nostro panello di controllo sulla pagina
css-dock.html troviamo questo:
CODICE
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 60,
proximity: 80,
halign : 'center'
Per modificare l'aspetto iniziale delle icone ci basta modificare il valore in
itemWidth, se abbiamo intenzione di modificare l'aspetto delle icone al passaggio del mouse cambiamo il valore in
proximity.
Naturalmente vi consiglio di studiare un pň di
CSS prima di apportare modifiche sbagliate.
Dopo aver personalizzato al meglio il nostro menů possiamo inserirlo nel nostro forum usando un iframe:
HTML
<iframe src="http://webres.altervista.org/Scorpy/css-dock.html" width="900" height="150" scrolling="no" frameborder="0"></iframe>
Bisogna cambiare
http://webres.altervista.org/Scorpy/css-dock.html con il vostro link della pagina web.
*Per un effetto migliore vi consiglio di impostare lo stesso sfondo della vostra pagina web.
Guida creata da Scorpy87 per il Newsboard, vieta copia parziale o integrale.
"Icon by Icondock - Credit script Css dock menu by Ndesign-studio"
