В этом уроке вы создадите расширяемое боковое навигационное меню с JavaScript и CSS. Конечный продукт будет выглядеть так, как показано ниже:
Разметка
Для начала добавим немного разметки для нашего бокового меню:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<div id=»sideNavigation» class=»sidenav»>
<a href=»javascript:void(0)» class=»closebtn» onclick=»closeNav()»>×</a>
<a href=»#»>About</a>
<a href=»#»>Features</a>
<a href=»#»>Contact Us</a>
</div>
<nav class=»topnav»>
<a href=»#» onclick=»openNav()»>
<svg width=»30″ height=»30″ id=»icoOpen»>
<path d=»M0,5 30,5″ stroke=»#000″ stroke-width=»5″/>
<path d=»M0,14 30,14″ stroke=»#000″ stroke-width=»5″/>
<path d=»M0,23 30,23″ stroke=»#000″ stroke-width=»5″/>
</svg>
</a>
</nav>
<div id=»main»>
<!— Add all your websites page content here —>
</div>
|
Здесь вы можете видеть, что мы создали боковое меню div с классом sidenav . Затем мы добавили фактическую навигацию по верхней панели через <nav> , и мы используем SVG для нашего бокового меню.
Атрибут onclick значка и кнопки закрытия активирует JavaScript, который мы добавим далее.
Не забудьте поместить весь контент вашего сайта в контейнер div id="main" чтобы он скользил вправо.
JavaScript
Далее давайте добавим JavaScript для создания openNav и closeNav .
|
01
02
03
04
05
06
07
08
09
10
11
|
<script>
function openNav() {
document.getElementById(«sideNavigation»).style.width = «250px»;
document.getElementById(«main»).style.marginLeft = «250px»;
}
function closeNav() {
document.getElementById(«sideNavigation»).style.width = «0»;
document.getElementById(«main»).style.marginLeft = «0»;
}
</script>
|
CSS
Наконец, нам нужно стилизовать нашу страницу с помощью некоторого CSS для бокового меню и наших ссылок:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content — use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
overflow:hidden;
width:100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
a svg{
transition:all .5s ease;
&:hover{
#transform:rotate(180deg);
}
}
#ico{
display: none;
}
.menu{
background: #000;
display: none;
padding: 5px;
width: 320px;
@include border-radius(5px);
#transition: all 0.5s ease;
a{
display: block;
color: #fff;
text-align: center;
padding: 10px 2px;
margin: 3px 0;
text-decoration: none;
background: #444;
&:nth-child(1){
margin-top: 0;
@include border-radius(3px 3px 0 0 );
}
&:nth-child(5){
margin-bottom: 0;
@include border-radius(0 0 3px 3px);
}
&:hover{
background: #555;
}
}
}
|
Примечание . body {overflow-x: hidden;} требуется, чтобы гарантировать, что горизонтальная прокрутка не появляется при использовании этого с существующим CSS.
Теперь вы можете взглянуть на свое меню и попробовать его в своем браузере.
Использование jQuery
Если вы хотите создать боковое меню JavaScript с помощью jQuery, вы можете сделать это, заменив JavaScript, который я предоставил ранее, следующим разделом:
|
1
2
3
4
5
6
7
8
9
|
$(‘.topnav a’).click(function(){
$(‘#sideNavigation’).style.width = «250px»;
$(«#main»).style.marginLeft = «250px»;
});
$(‘.closebtn’).click(function(){
$(‘#sideNavigation’).style.width = «0»;
$(«#main»).style.marginLeft = «0»;
});
|
Снятие слайда
Чтобы меню отображалось без анимации слайдов, просто внесите изменения в transition свойства CSS, как показано ниже в сокращенной форме:
|
1
2
3
4
5
6
7
|
.sidenav {
transition: 0s;
}
#main {
transition: margin-left 0s;
}
|
Это заставит изменение появиться немедленно, поскольку в transition нет задержки, указанной. По умолчанию мы использовали 0.5s .
Вывод
Создание бокового меню занимает всего несколько строк кода и не требует много ресурсов. Кроме того, если jQuery уже находится на странице для других задач, задание может быть выполнено с немного меньшим количеством строк кода и настроено дальше.
Создание адаптивного кода для работы с различными разрешениями экрана устройства — это всего лишь случай модификации CSS путем добавления медиазапросов для конкретных случаев.
Чтобы продвинуться дальше, вы можете захотеть стилизовать свое меню с помощью CSS-фреймворка, такого как Bootstrap или Bulma .