боковая панель Foundation
Боковая панель навигации
использование Фонд <ul class="side-nav"> "> создать боковую панель:
примеров
<Ul класс = "боковой нав ">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
<Li> <a HREF = "#"> Link 4 </ а> </ li>
</ UL>
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
<Li> <a HREF = "#"> Link 4 </ а> </ li>
</ UL>
Попробуйте »
Активация связь с разделительной линией
Я нажал на ссылку <li> Используйте .active класс идентифицированный с помощью .divider класс , чтобы добавить горизонтальную линию:
примеров
<Ul класс = "боковой нав ">
<Li класс = "активный"> <a класс = "a" HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a класс = "a" HREF = "#"> Ссылка 2 </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a класс = "a" HREF = "#"> Link 3 </ а> </ li>
<Li> <a класс = "a" HREF = "#"> Link 4 </ а> </ li>
</ UL>
<Li класс = "активный"> <a класс = "a" HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a класс = "a" HREF = "#"> Ссылка 2 </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a класс = "a" HREF = "#"> Link 3 </ а> </ li>
<Li> <a класс = "a" HREF = "#"> Link 4 </ а> </ li>
</ UL>
Попробуйте »
Сетка боковая панель
Мы можем использовать режим проектирования сетки для установки навигационной панели на стороне, примеры являются следующие:
примеров
<Div класс = "строка">
<Div класс = "средний-4 колонки" стиль = "цвет фона: # f1f1f1;">
<Ul класс = "боковой нав ">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> ЖЖ HTML </ A> </ li>
...
</ UL>
</ Div>
<класс = "Див среднего 8 столбцов">
<H1> Side Nav </ h1 >
<P> Какой - то текст .. </ p>
...
</ Div>
</ Div>
<Div класс = "средний-4 колонки" стиль = "цвет фона: # f1f1f1;">
<Ul класс = "боковой нав ">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> ЖЖ HTML </ A> </ li>
...
</ UL>
</ Div>
<класс = "Див среднего 8 столбцов">
<H1> Side Nav </ h1 >
<P> Какой - то текст .. </ p>
...
</ Div>
</ Div>
Попробуйте »