Лого www.SiteHere.ru

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

Меню как на смартфоне

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

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

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

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

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 кода немного, а эффект получается очень красивым:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

Создание выдвигающегося меню 5.00/5 (100.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

23 комментария к записи
  • 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

    что конкретно оборачивать не поймуsmiley 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. В скрипте меняются только классы, поэтому необходимо переместить меню вправо, а затем прописать, опять же, в стилях то, чтобы основной контент уезжал влево.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *