Barra di navigazione fissa indipendente dallo scroll pagina

tuxmax · Messaggio da **tuxmax** » 18/07/2012, 22:03

Volendo possiamo dare un tocco elegante al nostro forum inserendo una barra di navigazione (in stile comet chat per intenderci) dove inserire informazioni aggiuntive che posizioneremo in modo fisso ai piedi del nostro forum indipendentemente dallo scolling della pagina.
Per fare questo modificheremo il file "index_body.html" ed aggiungeremo delle classi al "common.css" che serviranno per realizzare alcuni effetti alla barra di navigazione. Questa guida si riferisce ai temi basati su Prosilver.

Partiamo prima dal common.css e creamo la classe che servirà per dare forma e stile e che la fisserà in modo da averla sempre visibile ache quando si "scrolla" la pagina.
Apriamo allora il file forum/styles/VOSTRO_STILE/theme/common.css ed alla fine inseriamo

Codice: Seleziona tutto

/* Classe menu fisso*/
#fixmenu {
    background: url("{T_THEME_PATH}/images/IMMAGINE_DI_FONDO") repeat-x scroll left top #000000;
    border-top: 1px solid #FFC000;
    bottom: 0;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    height: 37px;
    position: fixed;
	width: 100%;
    z-index: 1000;
}

nel caso non vogliate inserire un'immagine di fondo ma utilizzare un colore unico vi basterà modificare

Codice: Seleziona tutto

    background: url("{T_THEME_PATH}/images/IMMAGINE_DI_FONDO") repeat-x scroll left top #000000;

con

Codice: Seleziona tutto

    background-color: #000000 repeat-x scroll left top;

dove "#000000" in questo caso sarà il colore nero.

Fatto questo apriamo adesso il file forum/styles/VOSTRO_STILE/template/index_body.html e cerchiamo

Codice: Seleziona tutto

<!-- INCLUDE overall_footer.html -->

subito dopo inseriamo le informazioni che vorremo rendere visibili nella barra

Codice: Seleziona tutto

<div id="fixmenu">
<div style="margin-top: 10px; margin-left: 4px; text-align: left; float: left;">
Testo da inserire a sinistra</div>
<div style="margin-top: 10px; margin-right: 4px; text-align: right; float: right;">
[
<a href="#">link1</a>
] &bull; [
<a href="#">link2</a>
] &bull; [
<a href="#">link3</a>
] &bull; [
<a href="#">link4</a>
]
  </div>	
	</div>

svuotate le solite cache (generale+stile) ed aggiornate più volte il vostro browser, se abbiamo fatto tutto correttamente dovremmo avere una cosa del genere che rimarrà sempre fissa

DEMO

Saluti. :ciao: