Crea un menu CSS che cada fuori dal main
La maggior parte delle persone che hanno computer, cercano sempre di connettersi a Internet. Successivamente, chiunque può visitare vari siti come utente. Questa può essere una ricerca di informazioni, intrattenimento, formazione, giochi, chattare nei forum e altro.
Accedendo alla pagina del sito, l'utente vede il suo contenuto. È come il contenuto del libro che stai per leggere. Il contenuto consiste di diversi insiemi di collegamenti che traducono l'utente in altre pagine della risorsa o anche in altri siti. Tali collegamenti aiutano gli utenti a navigare in Internet. I collegamenti sono raggruppati in blocchi separati che rappresentano il menu del sito.
La funzionalità di qualsiasi risorsa dipende in gran parte da quale menu viene utilizzato su di essa. Il menu del sito può avere un design diverso, avere un orientamento orizzontale o verticale, situato nella parte inferiore, superiore o laterale, essere nascosto, aperto, discesa, spiegamento.
Menu a discesa CSS orizzontale
Il menu a discesa orizzontale viene utilizzato per organizzare la navigazione. struttura del sito. Non dovresti abusare del numero di livelli da investire, non ci dovrebbero essere più di due. Con più livelli di utenti sarà molto più difficile trovare le informazioni necessarie. Successivamente, consideriamo più in dettaglio il metodo di creazione del menu.
Immagina un menu CSS che cade dal blocco orizzontale principale. Rendiamo complicata l'operazione e creiamo un menu a discesa CSS al passaggio del mouse. Ci deve essere una sorta di blocco orizzontale principale con collegamenti che rappresentano voci di menu. Dopo aver posizionato il mouse su questi punti, dovrebbero essere aperti ulteriori punti di navigazione.
Per creare un menu a discesa CSS, avrai bisogno di:
- File HTML;
- File CSS;
- immagine per lo sfondo.
L'immagine per lo sfondo è un elemento ausiliario per migliorare il design e rendere il menu elegante.
Crea un file html
Le pagine di qualsiasi sito possono essere statiche o dinamiche. La pagina statica del sito quando visualizzata in un browser viene visualizzata nel modulo in cui è stata originariamente creata. Una pagina dinamica viene creata quando viene aperta nel browser da pagine di plug-in separate e un'ulteriore uscita di informazioni dal database. Ma in ogni caso, se si apre una pagina con il codice sorgente tramite un browser, verrà visualizzata la pagina HTML del markup ipertestuale. Per creare un menu, è necessario sviluppare una pagina HTML e salvarla in un file HTML. Crea un c-menu che cade fuori dal main in questo modo. Le pagine HTML possono essere create in qualsiasi editor di testo, ma è meglio usare quelle specializzate: Notepad ++ o Adobe Dremweaver CSS. Apri una pagina vuota nell'editor, inserisci il codice necessario e salvalo con il nome myindex.html. I commenti possono essere aggiunti direttamente nel codice, tra tag speciali. che sono usati in HTML per questo scopo.
Il layout della pagina quando si crea un menu CSS orizzontale a discesa è diverso dal solito menu standard, dal momento che le voci dell'elenco sono necessarie
- o
- .
Codice HTML
Va notato che in HTML tutte le costruzioni tra parentesi <> sono chiamate tag. I tag possono essere singoli e coppia. Il tag pair deve contenere due coppie di parentesi <> e nella seconda coppia la struttura all'interno inizia con una barra /. In un tag associato, il primo tag è quello di apertura e il secondo è quello di chiusura.
Crea codice:
In questo modo puoi creare un numero infinito di elementi e sottomenu. Alla fine, chiudi tutti i tag associati.
Creare un file CSS
Il file è stato collegato al file HTML. stili style.css necessario non solo per il corretto posizionamento del menu sulla pagina del sito web, ma anche per dare al menu un aspetto bello, creando un design unico sito web. Il file CSS viene creato nello stesso editor del file HTML, ma, a differenza della pagina HTML, l'utente vedrà solo il risultato del file di stile sulla pagina visualizzata. Inoltre, quando si aggiungono commenti ai CSS, viene utilizzato il costrutto / * Commento ... * /.
Codice CSS
Crea codice:
/ * Menu a discesa CSS * /
body {/ * Stile per il corpo della pagina del sito * /
sfondo: # 0814da; / * Colore di sfondo * /
margine: 0; / * Imbottitura esterna * /
padding: 0; / * Imbottitura interna * /
famiglia di font: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Famiglia di caratteri * /
}
.esempio {/ * dell'intero blocco di menu * /
posizione: relativa; / * Posizionamento relativo all'origine * /
background: # ebecf7 url (../ images / vanbackground.jpg); / * Sfondo con un'immagine per l'intero menu * /
larghezza: 525 px; / * Larghezza dell'intero blocco di menu * /
altezza: 384 px; / * Altezza dell'intero blocco del menu * /
bordo: 1px # 000 solido; / * Spessore e stile del bordo dell'intero blocco di menu * /
margine: 21px auto;
imbottitura: 16px;
}
/ * stili per menu * /
.navigator, .navigator ul {/ * Stile di blocco con elenco non numerato * /
stile elenco: nessuno; / * Annulla i marcatori per l'elenco * /
margine: 0;
padding: 0;
}
.navigator {/ * Stile blocco di navigazione * /
posizione: relativa;
}
.navigator ul {/ * Stile elenco non numerato * /
altezza: 0; / * Altezza * /
a sinistra: 0; / * Sinistra * /
overflow: nascosto; / * Una parte del blocco è nascosta se non si adatta completamente nello spazio fornito * /
posizione: assoluta; / * Facciamo il posizionamento assoluto * /
superiore: 47 px; / * Sopra * /
}
.navigator li {/ * Stile degli articoli non numerati * /
float: a sinistra; / * Avvolgere a sinistra * /
posizione: relativa;
}
.navigator li a {/ * Stile elenco articoli non in elenco * /
background-color: # 7c75b7; / * Colore di sfondo * /
border: 1px solid # 7c75b7;
colore: #fbfbff;
display: block; / * Mostra per blocco. * /
font-size: 15px; / * Imposta la dimensione del carattere * /
altezza della linea: 34px; / * Interlinea * /
imbottitura: 6px 21px;
decorazione del testo: nessuna; / * Testo senza design * /
transizione: 0,6 s;
}
.navigator li: hover> a {/ * Stile di elementi in una lista non numerata quando si passa il mouse * /
sfondo: # 8fcb38;
border-color: # 7c75b7;
colore: #fbfbff;
}
.navigator li: hover ul.vipadnoe {/ * Menu a discesa dello stile al passaggio del mouse * /
altezza: auto;
larghezza: 181 px;
}
.navigator ul li {/ * Elenco di stili ed elementi * /
-moz-transizione: 0,7 s;
}
.navigator li ul li {/ * Stile item-list-item * /
-moz-transition-delay: 1s;
}
.navigator li: hover ul li {/ * Stile hover del mouse * /
}
.navigator ul li a {/ * Style list-item-link * /
sfondo: # 7c75b7;
border-color: # 7c75b7;
colore: #fbfbff;
line-height: 2px;
-moz-transition: 1.7s;
-o-transizione: 1.7s;
-webkit-transition: 1.7s;
transizione: 1.7s;
}
.navigator li: hover ul li a {/ * Stile in bilico item-list-item-link * /
altezza della linea: 36px;
}
.navigator ul li a: hover {/ * Link elenco-elemento più link stile * /
sfondo: # 8fcb39;
background-image: rgba (41,137,216,0.5);}
Dopo che i file myindex.html e style.css sono stati creati, devono essere collocati in una cartella separata. Per comodità, creiamo nella cartella "My Documents" una cartella demo separata, e in essa una cartella CSS, dove posizioniamo il file style.css e una cartella images, dove inseriamo l'immagine di sfondo specificata nel file di stile. Per il file myindex.html, non creiamo un'altra cartella separata e la inseriamo nella cartella demo creata in origine. Ora, aprendo il file myindex.html nel browser, è possibile visualizzare il menu CSS orizzontale che appare quando si passa il mouse. Questo è tutto.
Allo stesso modo, un menu a discesa verticale viene creato sul CSS, ma solo per questo sarà necessario sviluppare un file di stile leggermente diverso.