Октябрь 25, 2019 Запись была обновлена

Время чтения: < 1 мин.

Создание выдвигающегося меню

Сегодня мы создадим боковое меню, похожее на то, что в смартфонах. Но это меню будет у вас на сайте.

Пример меню можно увидеть здесь:

Посмотреть пример Скачать

Подключение jQuery

Первым делом подключаем библиотеку. Скачать ее можно — здесь.

1	<script type="text/javascript" src="js/jquery.js"></script>

HTML часть

Сейчас добавим меню в виде списка:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Видео</a></li>
            <li><a href="#">Выход</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="swipe-area"></div>
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <!-- Произвольный контент -->
        </div>
    </div>
</div>

CSS часть

CSS кода немного, а эффект получается очень красивым:

#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#sidebar ul li {
    margin: 0;
}
 
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
 
#sidebar ul li:hover a {
    background: #C9223D;
}
 
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
 
.main-content #sidebar-toggle .bar {
    display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}
 
.main-content #sidebar-toggle .bar:last-child {
    margin-bottom: 0;   
}

Javascript часть

И допишем небольшой код на JS:

<script type="text/javascript">
    $(window).load(function(){
        $("[data-toggle]").click(function() {
            var toggle_el = $(this).data("toggle");
            $(toggle_el).toggleClass("open-sidebar");
        });
        $(".swipe-area").swipe({
            swipeStatus:function(event, phase, direction, distance, duration, fingers)
                {
                    if (phase=="move" && direction =="right") {
                        $(".container").addClass("open-sidebar");
                        return false;
                    }
                    if (phase=="move" && direction =="left") {
                        $(".container").removeClass("open-sidebar");
                        return false;
                    }
                }
        }); 
    });
</script>

Итак, вот мы и создали выезжающее меню. Данное меню прилично сэкономит вам место на сайте, при его использовании.

Успехов!

Источник: onextrapixel.com

Юрий Немец

Создатель проекта "sitehere.ru". Сооснователь компании "Exore". В интернет-маркетинге с 2013 года. Специализируется на контент-маркетинге и SEO. Автор мини-книги "Как раскрутить сайт с нуля до 32 000 посетителей в месяц".

Личный telegram-канал о digital-маркетинге для руководителей.

26 комментариев к записи

ZeroXor

В самом эффекте выдвижения ничего нового для себя не нашел, а вот за задержку подсветки при наведении — большое спасибо, об этом CSS-параметре я раньше не знал. Уже к себе в блог его вкрутил, очень красиво, IMO, получилось.

Ответить
Вячеслав

Юрий,возможно ли вместо меню ссылок туда поставить например рекламный баннер?

Ответить
- Юрий
  
  Конечно. Но ведь его не будут тогда видеть)
  
  Ответить
Роман

Подскажите пожалуйста, каким образом можно сделать чтоб меню это было постоянно на сайте открыто, чтоб убрать кнопку открывание/закрывания и открыть его раз и навсегда. Как?

Ответить
- Юрий
  
  Роман, дело в том, что при «выезжании» этого меню, весь контент смещается вправо. Поэтому, если сделать его фиксированным открытым, то часть сайта не будет видно.
  
  Ответить
  - Роман
    
    ясно
    
    Ответить
Chris

не работает джава скрипт, ругается на .swipe-area, и в html коде у вас не написано ничего про .swipe-area

Ответить
- Юрий
  
  Исправил.
  
  Ответить
MJ

Когда выдвигается сайдбар, то весь блок с контентом не сужается, а просто сдвигается, и текст уходит вправо за пределы экрана. Win 8×64, Google Chrome

Ответить
- Юрий
  
  Всё верно.
  
  Ответить
  - MJ
    
    Ну так это же не нормально ❓
    
    Ответить
Юрий

Почему? Ведь полоса прокрутки снизу не появляется.

Ответить
- MJ
  
  Ну, так а где вы видели, чтобы такое было в приложениях или на сайтах? Я такого нигде не видел. Да, правая часть сужалась, но информация вся оставалась на экране, либо меню открывалось поверх правого контента
  
  Ответить
  - Юрий
    
    Я видел такое меню на sitehere.ru в примерах 😉 .
    P. S. Вы всегда можете изменить меню на своё усмотрение.
    
    Ответить
junothan

а как запихнуть в это меню левый сайдбар в drupal7 ?

Ответить
- Юрий
  
  1. Найти файл шаблона темы, который отвечает за сайдбар.
  
  2. Вставить HTML код в него.
  
  3. Вставить CSS стили в файл стилей темы.
  
  4. Подключить в футере скрипты.
  
  Ответить

junothan

что конкретно оборачивать не пойму 3 день бодаюсь с движком

<?php
$vars = get_defined_vars();
$view = get_artx_drupal_view();
$view->print_head($vars);
if (isset($page))
foreach (array_keys($page) as $name)
$$name = & $page[$name];
$art_sidebar_left = isset($sidebar_left) && !empty($sidebar_left) ? $sidebar_left : NULL;
$art_sidebar_right = isset($sidebar_right) && !empty($sidebar_right) ? $sidebar_right : NULL;
if (!isset($vnavigation_left)) $vnavigation_left = NULL;
if (!isset($vnavigation_right)) $vnavigation_right = NULL;
$tabs = (isset($tabs) && !(empty($tabs))) ? '<ul class="arttabs_primary">'.render($tabs).'</ul>' : NULL;
$tabs2 = (isset($tabs2) && !(empty($tabs2))) ?'<ul class="arttabs_secondary">'.render($tabs2).'</ul>' : NULL;
?>

<div id="jmain">
    <div class="jsheet clearfix">
<header class="jheader clearfix"><?php if (!empty($art_header)) { echo render($art_header); } ?>


    <div class="jshapes">
<?php if (!empty($site_name)) : ?>
<h1 class="jheadline" data-left="1.23%"><a href="<?php echo check_url($front_page); ?>" title = "<?php echo $site_name; ?>"><?php echo $site_name;  ?></a></h1><?php endif; ?>



            </div>
<div class="jtextblock jobject227400126" data-left="97.5%">
    <?php if (!empty($search_box)) { echo render($search_box); } ?>
</div>
                
                    
</header>
<?php if (!empty($navigation) || !empty($extra1) || !empty($extra2)): ?>
<nav class="jnav clearfix">
     
    <?php if (!empty($extra1)) : ?>
<div class="jhmenu-extra1"><?php echo render($extra1); ?></div>
<?php endif; ?>
<?php if (!empty($extra2)) : ?>
<div class="jhmenu-extra2"><?php echo render($extra2); ?></div>
<?php endif; ?>
<?php if (!empty($navigation)) : ?>
<?php echo art_hmenu_output(render($navigation)); ?>
<?php endif; ?>
</nav><?php endif; ?>

<?php if (!empty($banner1)) { echo '<div id="banner1">'.render($banner1).'</div>'; } ?>
<?php echo art_placeholders_output(render($top1), render($top2), render($top3)); ?>
<div class="jlayout-wrapper clearfix">
                <div class="jcontent-layout">
                    <div class="jcontent-layout-row">
                        <?php if (!empty($art_sidebar_left) || !empty($vnavigation_left)) : ?>
<div class="jlayout-cell jsidebar1 clearfix"><?php echo render($vnavigation_left); ?>
<?php echo render($art_sidebar_left); ?>
</div><?php endif; ?>
                        <div class="jlayout-cell jcontent clearfix"><?php if (!empty($banner2)) { echo '<div id="banner2">'.render($banner2).'</div>'; } ?>
<?php if ((!empty($user1)) && (!empty($user2))) : ?>
<table class="position" cellpadding="0" cellspacing="0" border="0">
<tr valign="top"><td class="half-width"><?php echo render($user1); ?></td>
<td><?php echo render($user2); ?></td></tr>
</table>
<?php else: ?>
<?php if (!empty($user1)) { echo '<div id="user1">'.render($user1).'</div>'; }?>
<?php if (!empty($user2)) { echo '<div id="user2">'.render($user2).'</div>'; }?>
<?php endif; ?>
<?php if (!empty($banner3)) { echo '<div id="banner3">'.render($banner3).'</div>'; } ?>

<?php if (!empty($breadcrumb)): ?>
<article class="jpost jarticle">
                                
                                                
                                <div class="jpostcontent"><?php { echo $breadcrumb; } ?>
</div>
</article><?php endif; ?>
<?php if (($is_front) || (isset($node) && isset($node->nid))): ?>

<?php if (!empty($tabs) || !empty($tabs2)): ?>
<article class="jpost jarticle">
                                
                                                
                                <div class="jpostcontent"><?php if (!empty($tabs)) { echo $tabs.'<div class="cleared"></div>'; }; ?>
<?php if (!empty($tabs2)) { echo $tabs2.'<div class="cleared"></div>'; } ?>
</div>
</article><?php endif; ?>

<?php if (!empty($mission) || !empty($help) || !empty($messages) || !empty($action_links)): ?>
<article class="jpost jarticle">
                                
                                                
                                <div class="jpostcontent"><?php if (isset($mission) && !empty($mission)) { echo '<div id="mission">'.$mission.'</div>'; }; ?>
<?php if (!empty($help)) { echo render($help); } ?>
<?php if (!empty($messages)) { echo $messages; } ?>
<?php if (isset($action_links) && !empty($action_links)): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
</div>
</article><?php endif; ?>

<?php $art_post_position = strpos(render($content), "jpost"); ?>
<?php if ($art_post_position === FALSE): ?>
<article class="jpost jarticle">
                                
                                                
                                <div class="jpostcontent"><?php endif; ?>
<?php echo art_content_replace(render($content)); ?>
<?php if ($art_post_position === FALSE): ?>
</div>
</article><?php endif; ?>

<?php else: ?>

<article class="jpost jarticle">
                                
                                                
                                <div class="jpostcontent"><?php if (!empty($title)): print '<h1'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h1>'; endif; ?>
<?php if (!empty($tabs)) { echo $tabs.'<div class="cleared"></div>'; }; ?>
<?php if (!empty($tabs2)) { echo $tabs2.'<div class="cleared"></div>'; } ?>
<?php if (isset($mission) && !empty($mission)) { echo '<div id="mission">'.$mission.'</div>'; }; ?>
<?php if (!empty($help)) { echo render($help); } ?>
<?php if (!empty($messages)) { echo $messages; } ?>
<?php if (isset($action_links) && !empty($action_links)): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
<?php if (arg(0) == "taxonomy" || $is_views): ?>
      </div>
    </article>
  <?php echo art_content_replace(render($content)); ?>
<?php else: ?>
  <?php echo art_content_replace(render($content)); ?>
</div>
</article>
<?php endif; ?>
<?php endif; ?>

<?php if (!empty($banner4)) { echo '<div id="banner4">'.render($banner4).'</div>'; } ?>
<?php if ((!empty($user3)) && (!empty($user4))) : ?>
<table class="position" cellpadding="0" cellspacing="0" border="0">
<tr valign="top"><td class="half-width"><?php echo render($user3); ?></td>
<td><?php echo render($user4); ?></td></tr>
</table>
<?php else: ?>
<?php if (!empty($user3)) { echo '<div id="user3">'.render($user3).'</div>'; }?>
<?php if (!empty($user4)) { echo '<div id="user4">'.render($user4).'</div>'; }?>
<?php endif; ?>
<?php if (!empty($banner5)) { echo '<div id="banner5">'.render($banner5).'</div>'; } ?>
</div>
                    </div>
                </div>
            </div><?php echo art_placeholders_output(render($bottom1), render($bottom2), render($bottom3)); ?>
<?php if (!empty($banner6)) { echo '<div id="banner6">'.render($banner6).'</div>'; } ?>
<footer class="jfooter clearfix"><?php
$footer = render($footer_message);
if (isset($footer) && !empty($footer) && (trim($footer) != '')) { echo $footer; } // From Drupal structure
elseif (!empty($art_footer) && (trim($art_footer) != '')) { echo $art_footer; } // From Artisteer Content module
else { // HTML from Artisteer preview
ob_start(); ?>

<p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p>
<p>Copyright © 2015. All Rights Reserved.</p>
    <p class="jpage-footer">
        <span id="jfootnote-links">Designed by <a target="_blank" href="aleks0000016@mail.ru">Алексей</a>.</span>
        <span id="jlicence-links">Images by Flickr/Muffet,Anderson Mancini,DaedaLusT</span>
    </p>
<?php
  $footer = str_replace('%YEAR%', date('Y'), ob_get_clean());
  echo art_replace_image_path($footer);
}
?>
<?php if (!empty($copyright)) { echo '<div id="copyright">'.render($copyright).'</div>'; } ?>
</footer>

    </div>
</div>


<?php $view->print_closure($vars); ?>

Ответить

junothan

проблема решилась но как теперь избавиться от дублирования заголовков меню

Ответить
Антон

Здравствуйте, я столкнулся с такой проблемой. Я сделал все как нужно, но вот у меня длинная страница и скролл страницы вниз не работает. Помогите пожалуйста

Ответить
- Юрий Немец
  Здравствуйте, Антон!
  
  Обратите внимание на файл CSS. Первой строчкой там идем свойство для body:
  
  overflow:hidden
  
  Оно и скрывает скроллы.
  Ответить
  - Eugene
    
    Если убрать overflow:hidden — при открывании меню появляется горизонтальная прокрутка. А если контента много — при прокручивании вниз панель остается висящей "в воздухе".
    
    Ответить
Дима

Подскажите, как сделать выезд меню справа?

Ответить
- Юрий Немец
  
  Здравствуйте, Дмитрий!
  
  Вам необходимо изменить соответствующие стили CSS. В скрипте меняются только классы, поэтому необходимо переместить меню вправо, а затем прописать, опять же, в стилях то, чтобы основной контент уезжал влево.
  
  Ответить
Егор

Каким образом можно прикрутить к WordPress? У меня мультисайт на WordPress

Ответить
- Юрий Немец
  
  Добрый день, Егор!
  Вам необходимо это меню «встроить» в вашу тему, которую вы используете на сайте (или сайтах). Также понадобятся знания Walker Class, чтобы изменять меню, как вы захотите и добавлять классы.
  
  Ответить
  - Егор
    
    Есть тестовый сайт, можете на нем поставить свой код, с этой страницы? Напишите мне на почту дам доступ
    
    Ответить

Exore LTD » jQuery » Создание выдвигающегося меню

Создание выдвигающегося меню

Посмотреть примерСкачать

Подключение jQuery

HTML часть

CSS часть

Javascript часть

Успехов!

Еще материалы по этой теме

Расскажите о вашей задаче

Спасибо за ваше обращение!

Отправить статью

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

26 комментариев к записи

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

Выберите удобный способ получения обновлений

Получать обновления можно в любом мессенджере:

Получать обновления можно на ваш Email:

Посмотреть пример Скачать