Лучшее руководство по боковая панель Foundation в 2024 году. В этом руководстве вы можете изучить
Боковая панель навигации,Сетка боковая панель,
боковая панель 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> Используйте .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> Попробуйте »
Сетка боковая панель
Мы можем использовать режим проектирования сетки для установки навигационной панели на стороне, примеры являются следующие:
примеров
<Div класс = "строка"> <Div класс = "средний-4 колонки" стиль = "цвет фона: # f1f1f1;">
<Ul класс = "боковой нав ">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> ЖЖ HTML </ A> </ li>
ru.
</ UL> </ Div> <класс = "Див среднего 8 столбцов">
<H1> Side Nav </ h1 >
<P> Какой -
то текст ru </ p>
ru.
</ Div> </ Div> Попробуйте »