Image Image Image Image Image Image Image Image Image Image

Блог SiteRX.ru | 04.11.2017

Наверх

Наверх

8 Комментариев

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

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

В этом уроке мы покажем, как создать простое и современное навигационное меню, используя 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="https://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 готово!

Комментарии

  1. Артём

    Огромное спасибо, среди всей кучи дерьма я рад, что нашёл такой отличный материал!

  2. Валерий

    Спасибо!

  3. просто и гениально.
    Забрал себе.

  4. Дмитрий

    Спасибо!
    Вопрос, как сделать, чтоб открытое меню закрывалось по клику на оставшейся видимой части страницы?

  5. Спасибо, легенький скрипт, то что нада. Мб подскажете как сделать прокрутку вниз внутри этого блока? там position:fixed; Я в него вставил аккардион при раскрытии все улетает за нижнюю область(

    • Пардон. Уже сам нашел)) Может кому будет полезно. Заработало вот так:

      .menu {
      position: fixed;
      top:0;
      bottom:0;
      overflow-y:scroll;
      overflow-x:hidden;
      }

  6. Алена

    Спасибо за урок!
    А как можно сделать, чтоб меню не уезжала в сторону, а оставалось на месте?

  7. А есть ли способ сделать боковое слайд-меню, чтобы оно выползало просто при наведении курсора мыши на самый край окна? (скажем, полоса в пикселей 10 с левой стороны экрана)

Оставить комментарий