Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2020, 02:11
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Подскажите как сделать без jQuery?
<html>
<style>
body {padding-top: 70px; font: 14px/24px Arial, Tahoma, sans-serif;background: #C0C0C0;}
ol, ul {list-style: none;}
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}

header {position: fixed;top: 0;left: 0;right: 0;padding: 10px;background: #ff0000;height: 60px;box-shadow: 0px 0px 13px 5px #000000;}

.nav {float: right;}
.nav li {float: left;}
.nav li a, #touch-menu {display: block;padding: 12px 15px;font-weight: bold;font-size: 16px;color: #fff;}
.nav li a:hover {background: #515572;}
#touch-menu {display: none;}

@media (max-width: 800px) {
body {padding-top: 60px}
header {position: fixed;top: 0;left: 0;right: 0;height: 50px;}
.nav {position: absolute;top: 100%;left: 0;right: 0;display: none;}
.nav li {float: none; opacity: 0.9;}
.nav li a {color: #333;border-top: 1px solid #eee;border-left: 3px solid transparent;background: #fff;}
.nav li:first-child a {border-top: none;}
.nav li a:hover {color: #fff;border-left: 3px solid #515572;}
#touch-menu {display: block;float: right;height: 50px; margin: -16px 0;}
}
.bar1, .bar2, .bar3 {width: 40px;height: 5px;background-color:#fff;margin: 6px 0;transition: 0.4s;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px);transform: rotate(-45deg) translate(-9px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px);transform: rotate(45deg) translate(-8px, -8px);}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>

<script>
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.nav');
$(touch).on('click', function(e) {e.preventDefault();menu.slideToggle();});
$(window).resize(function(){
var wid = $(window).width();
if(wid > 1000 && menu.is(':hidden')) {menu.removeAttr('style');}
});
});

function myFunction(x) {
  x.classList.toggle("change");
}
</script>

<header class="container clearfix">
<div id="touch-menu" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
<nav>
<ul class="nav clearfix">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>
</header>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2020, 03:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

DenisUfa, можно вообще без JS... https://codepen.io/Malleys/pen/dyPqYJN?editors=1100
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2020, 09:38
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Спасибо. Отлично работает.
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2020, 09:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Malleys,
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2020, 21:23
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Только сегодня заметил что это не работает на айфонах. Подскажите как исправить? На кнопку меню <button id="touch-menu"> нет реакции вообще.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать без участия JQuery? AntonMs Общие вопросы Javascript 4 26.04.2015 06:49
Как сделать без JQuery AntonMs Элементы интерфейса 2 24.04.2015 23:44
как сделать выборку jquery используя переменную? alex162341 jQuery 10 29.01.2015 20:51
Вы подписаны на эту тему Подскажите - блок с заголовком, как сделать? al456 (X)HTML/CSS 2 11.04.2014 22:34
Подскажите как сделать запускаемые скрипты Sadist_dead Сайт Javascript.ru 4 07.11.2011 21:59