Latest web development tutorials

Fondation sidebar

navigation Sidebar

l' utilisation de la Fondation <ul class="side-nav"> "> pour créer une barre latérale:

Exemples

<Class Ul = "side-nav ">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link 4 </ a> </ li>
</ Ul>

Essayez »

Le lien d'activation avec la ligne de démarcation

Je clique sur le lien dans <li> Utilisez le .active classe identifiée en utilisant .divider classe pour ajouter la ligne horizontale:

Exemples

<Class Ul = "side-nav ">
<Li class = "active"> <a class = href = "a" "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>

Essayez »

Grille sidebar

Nous pouvons utiliser le mode de conception de la grille pour définir la barre de navigation latérale, les exemples sont les suivants:

Exemples

<Class Div = "ligne">
<Class = "Div moyennes-4 colonnes" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Li> <a href = "#"> savoir HTML </ a> </ li>
...
</ Ul>
</ Div>
<class = "Div moyennes-8 colonnes">
<H1> Side Nav </ h1 >
<P> Certains textes .. </ p>
...
</ Div>
</ Div>

Essayez »