Foundation sidebar
Sidebar navigation
Foundation use <ul class="side-nav"> "> to create a sidebar:
Examples
<Ul class = "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>
<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>
try it"
Activation link with the dividing line
I clicked on the link in <li> Use the .active class identified using .divider class to add horizontal line:
Examples
<Ul class = "side-nav ">
<Li class = "active"> <a class = "a" href = "#"> Link 1 </ a> </ li>
<Li> <a class = " a" href = "#"> Link 2 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a class = " a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = " a" href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li class = "active"> <a class = "a" href = "#"> Link 1 </ a> </ li>
<Li> <a class = " a" href = "#"> Link 2 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a class = " a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = " a" href = "#"> Link 4 </ a> </ li>
</ Ul>
try it"
Grid sidebar
We can use the grid design mode to set the side navigation bar, examples are as follows:
Examples
<Div class = "row">
<Div class = "medium-4 columns" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "active"> <a href = "#"> Home </ a> </ li>
<Li> <a href = " #"> Learn HTML </ a> </ li>
...
</ Ul>
</ Div>
<Div class = "medium-8 columns">
<H1> Side Nav </ h1 >
<P> Some text .. </ p>
...
</ Div>
</ Div>
<Div class = "medium-4 columns" style = "background-color: # f1f1f1;">
<Ul class = "side-nav ">
<Li class = "active"> <a href = "#"> Home </ a> </ li>
<Li> <a href = " #"> Learn HTML </ a> </ li>
...
</ Ul>
</ Div>
<Div class = "medium-8 columns">
<H1> Side Nav </ h1 >
<P> Some text .. </ p>
...
</ Div>
</ Div>
try it"