Простое боковое слайд-меню на jQuery

Karina | 23.07.2015

В этом уроке мы покажем, как создать простое и современное навигационное меню, используя CSS и несколько строк jQuery. Мы используем jQuery, чтобы боковое слайд-меню плавно открывалось с левой стороны веб-страницы.

Вы можете посмотреть демо, а также загрузить архив с файлами для более детального изучения и работы.

Демо Загрузить архив RAR (690 kB)

1. HTML

Для начала займемся разметкой HTML, где помимо основных элементов страницы будут находиться два элемента <script>, перед закрывающим тегом </body>. Первый скрипт подключает библиотеку jQuery, а второй — наш файл menu.js, который мы скоро заполним кодом.

<body>
	<div class="menu">
      
		<!-- Иконка меню -->
		<div class="icon-close">
			<img src="images/close-btn.png">
		</div>

		<!-- Меню -->
		<ul>
			<li><a href="#">About</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Help</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

	<!-- Main body -->
	<div class="background">

		<div class="icon-menu">
			<img src="images/menu-ham-icon.png">
			Menu
		</div>
	</div>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="menu.js"></script>
</body>

2. CSS

На втором этапе создадим файл style.css и запишем в него стили для страницы и бокового меню:

/* Body */

body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}


/* Menu */

.menu {
  background: #555 url('images/menu-bg.jpg') repeat left top;
  left: -285px; /* прячем меню */
  height: 100%;
  position: fixed;
  width: 285px;
}


/* Basic CSS */

.background {
  background-image: url('images/chicago-night.jpg'); 
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #555;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #555;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li:hover {
  cursor: pointer;
  background-color: #555;
  }

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 6px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu img {
  margin-right: 5px;
}

3. jQuery

Третий этап — маленький несложный код jQuery, с помощью которого мы оживим наше меню, чтобы его можно было открыть и закрыть. Каждая строчка кода сопровождается пояснениями.

/* Открытие меню */

var main = function() { //главная функция

    $('.icon-menu').click(function() { /* выбираем класс icon-menu и
               добавляем метод click с функцией, вызываемой при клике */

        $('.menu').animate({ //выбираем класс menu и метод animate

            left: '0px' /* теперь при клике по иконке, меню, скрытое за
               левой границей на 285px, изменит свое положение на 0px и станет видимым */

        }, 200); //скорость движения меню в мс
        
        $('body').animate({ //выбираем тег body и метод animate

            left: '285px' /* чтобы всё содержимое также сдвигалось вправо
               при открытии меню, установим ему положение 285px */

        }, 200); //скорость движения меню в мс
    });


/* Закрытие меню */

    $('.icon-close').click(function() { //выбираем класс icon-close и метод click

        $('.menu').animate({ //выбираем класс menu и метод animate

            left: '-285px' /* при клике на крестик меню вернется назад в свое
               положение и скроется */

        }, 200); //скорость движения меню в мс
        
    $('body').animate({ //выбираем тег body и метод animate

            left: '0px' //а содержимое страницы снова вернется в положение 0px

        }, 200); //скорость движения меню в мс
    });
};

$(document).ready(main); /* как только страница полностью загрузится, будет
               вызвана функция main, отвечающая за работу меню */

Вот и всё — удобное боковое выезжающее меню на jQuery готово!