Отзывчивая замена для меню навигации Semantic UI

Семантический интерфейс имеет некоторые проблемы, когда дело доходит до его коллекции меню. Короче говоря, не реагирует вообще, и самое близкое к этому - это их «стекируемая» реализация, чтобы просто показать меню как стек.Отзывчивая замена для меню навигации Semantic UI

Может ли кто-нибудь здесь рекомендовать хорошее меню навигации, которое хорошо сочетается с семантическим ui?

Спасибо за любой ввод.

источник

2016-08-03 pbarney

Можете ли вы рассказать, как вы хотите, чтобы ваше отзывчивое меню должно выглядеть? –

Почему Stackable не является хорошим решением? – Weedoze

@Weedoze Поскольку штабелируемое главное меню навигации всегда «открыто», перекрывающее большую часть первой страницы на мобильном экране. Ведущая разработка Semantic говорит, что нет планов сделать действительно отзывчивое меню, поэтому я ищу что-то еще. – pbarney

Я сделал пример кода ниже о том, как получить отзывчивое меню «гамбургер», используя семантический интерфейс. Нажмите ссылку «Полная страница» в JSFiddle, чтобы увидеть меню в полной ширине, а затем измените размер вашего браузера, чтобы увидеть отзывчивость.

$('.ui.sidebar').sidebar({ 
 
    context: $('.pushable.segment'), 
 
    transition: 'overlay' 
 
}).sidebar('attach events', 'a#hamburger-link');

.my-content .ui.segment{ 
 
    min-height:500px; 
 
    height:100%; 
 
} 
 
.ui.grid{ 
 
    padding:0 !important; 
 
} 
 
.pushable.segment{ 
 
    margin:0 !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<div class="ui grid"> 
 
    <div class="computer only row"> 
 
    <div class="column"> 
 
     <div class="ui inverted blue menu"> 
 
     <a class="item">Menu Item A</a> 
 
     <a class="item">Menu Item B</a> 
 
     <a class="item">Menu Item C</a> 
 
     <a class="item">Menu Item D</a> 
 
     </div><!-- blue menu--> 
 
    </div><!--column--> 
 
    </div><!--computer only row--> 
 
    <div class="tablet mobile only row"> 
 
    <div class="column"> 
 
     <div class="ui inverted blue menu"> 
 
     <a id="hamburger-link" class="item"><i class="bars icon"></i></a> 
 
     </div> 
 
    </div><!--column--> 
 
    </div><!--computer only row--> 
 
</div><!-- grid--> 
 
<div class="ui pushable segment"> 
 
    <div class="ui sidebar inverted blue vertical menu"> 
 
     <a class="item">Menu Item A</a> 
 
     <a class="item">Menu Item B</a> 
 
     <a class="item">Menu Item C</a> 
 
     <a class="item">Menu Item D</a> 
 
    </div><!-- blue menu--> 
 
    <div class="my-content pusher"> 
 
     <div class="ui segment"> 
 
     YOUR CONTENT HERE... ISN'T IT NICE? <i class="pointing up icon"></i> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-08-06 02:22:28

Я понимаю, что вы имеете в виду, но это не очень СУХОЙ. Необходимость дублировать структуру меню дважды приводит меня к мысли, что в системе навигационного меню SUI чего-то не хватает. – pbarney

используя минимальный HTML и CSS код, который мы можем достичь отзывчивого меню навигации, которые могут быть настроены и не JavaScript необходим. используя свойство off-canvas, мы можем скрыть основное меню, а в мобильном режиме ссылки меню приходят влево, а экран делится на 80% и контент 20%. Я использовал ярлык для меню гамбургера для мобильных устройств, ярлык скрыт для рабочего стола. Приступая к совместимости с браузером, прецедент для Off Canvas Menus обычно используется в смартфонах и планшетах, которые поставляются с современными браузерами. Все браузеры с IE8 и более высокими версиями поддерживают эту функцию.

Ниже приведен пример код навигации

@import "compass/css3"; 
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: .55em; 
 
    color: black; 
 
} 
 

 
/* custom scrollbar */ 
 
::-webkit-scrollbar { 
 
    width: .95em; 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    background-color: rgba(217, 217, 217, 0.5); 
 
} 
 

 
::-webkit-scrollbar-thumb { 
 
    background: rgba(184, 184, 184, 0.5); 
 
    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07); 
 
} 
 

 
/* Advanced Checkbox Hack */ 
 
body { 
 
    -webkit-animation: bugfix infinite 1s; 
 
} 
 

 
@-webkit-keyframes bugfix { 
 
    from { 
 
    padding: 0; 
 
    } 
 
    to { 
 
    padding: 0; 
 
    } 
 
} 
 

 
input[type=checkbox] { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    width: 2em; 
 
    height: 2.25em; 
 
    padding: .35em; 
 
    font-size: 1.1em; 
 
    color: #fff; 
 
    transition: color .3s ease-in-out; 
 
    cursor: pointer; 
 
    user-select: none; 
 
    margin: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
/* big screens */ 
 
nav[role="off-canvas"] { 
 
    position: relative; 
 
    width: 50em; 
 
    margin: 0 auto; 
 
    transition-duration: .3s, .5s; 
 
    transition-timing-function: ease-in-out; 
 
    transition-property: left, opacity, box-shadow; 
 
} 
 

 
nav[role="off-canvas"] a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font: 1.4em 'Open Sans', sans-serif; 
 
    transition: color .3s ease-in-out; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
nav[role="off-canvas"] ul { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
nav[role="off-canvas"] ul > li { 
 
    float: left; 
 
    padding: .5em 0; 
 
    width: 8em; 
 
    margin: .5em 0; 
 
    opacity: .8; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    background: rgba(247, 52, 8, 0.65); 
 
    cursor: pointer; 
 
    text-align: center; 
 
    transition-duration: .3s; 
 
    transition-timing-function: ease-in-out; 
 
    transition-property: box-shadow, color, opacity, padding-left; 
 
    cursor: pointer; 
 
} 
 

 
nav[role="off-canvas"] ul > li:hover { 
 
    color: #fff; 
 
    opacity: 1; 
 
    box-shadow: 0.5em 0 0 0 rgba(255, 255, 255, 0.95); 
 
} 
 

 
nav[role="off-canvas"] ul > li:hover > a { 
 
    color: #fff; 
 
} 
 

 
nav[role="off-canvas"] ul > li:nth-child(2) { 
 
    background: rgba(247, 183, 8, 0.65); 
 
} 
 

 
nav[role="off-canvas"] ul > li:nth-child(3) { 
 
    background: rgba(32, 247, 8, 0.65); 
 
} 
 

 
nav[role="off-canvas"] ul > li:nth-child(4) { 
 
    background: rgba(8, 231, 247, 0.65); 
 
} 
 

 
nav[role="off-canvas"] ul > li:nth-child(5) { 
 
    background: rgba(8, 72, 247, 0.65); 
 
} 
 

 
/* small screens */ 
 
@media screen and (max-width: 44em) { 
 
    html, 
 
    body { 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
    } 
 

 
    .content { 
 
    margin: 2.5em .5em 0 .5em; 
 
    } 
 

 
    nav[role="off-canvas"] { 
 
    position: absolute; 
 
    top: 3em; 
 
    left: -20em; 
 
    width: 20em; 
 
    opacity: 0; 
 
    } 
 

 
    nav[role="off-canvas"] ul > li { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: left; 
 
    margin: 0; 
 
    } 
 

 
    nav[role="off-canvas"] ul > li:hover { 
 
    box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45); 
 
    } 
 

 
    label { 
 
    display: block; 
 
    } 
 

 
    label:after { 
 
    position: absolute; 
 
    right: .25em; 
 
    top: 0; 
 
    content: "\2261"; 
 
    font-size: 1.8em; 
 
    } 
 

 
    label:hover, 
 
    input:checked ~ label { 
 
    color: #000; 
 
    } 
 

 
    input:checked ~ nav[role="off-canvas"] { 
 
    opacity: 1; 
 
    left: 0; 
 
    box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3); 
 
    } 
 

 
    input:checked ~ nav[role="off-canvas"] ul > li { 
 
    padding: .55em .55em .55em 1.5em; 
 
    } 
 

 
    input:checked ~ nav[role="off-canvas"] ul > li:hover { 
 
    padding-left: 3.5em; 
 
    } 
 

 
    input:checked ~ nav[role="off-canvas"] ul > li:after { 
 
    position: absolute; 
 
    right: .25em; 
 
    content: "\203A"; 
 
    font: bold 1.4em sans-serif; 
 
    color: inherit; 
 
    } 
 

 
    input:checked ~ .content { 
 
    margin-left: 20.5em; 
 
    margin-right: -20.5em; 
 
    } 
 
}

<input type="checkbox" id="menu"> 
 
<label for="menu" onclick></label> 
 
<nav role="off-canvas"> 
 
    <ul> 
 
     <li><a href="#">Stream</a></li> 
 
     <li><a href="#">Lab</a></li> 
 
     <li><a href="#">Projects</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</nav> 
 
</div>

источник

2017-02-07 10:05:32

спасибо! выглядит как рабочий пример. Я попытаюсь реализовать его на своем веб-сайте, а затем вознаградить вас! –

Спасибо ... :) –

Я только что понял, что ваше решение не совсем то, что требуется. Если его использовать, мне нужно удалить семантическое меню. И мне нужно семантическое меню, которое должно упасть в штабелируемое меню на мобильных телефонах. –

Я изменил мой предыдущий код и попытался сделать семантическую навигацию UI отзывчивой. Этот HTML-код основан на семантическом пользовательском интерфейсе, который я попытался сохранить как можно меньше, и добавил css и JS-код для функций перехода. Надеюсь, это поможет.

Я создал скрипку с новым кодом. Ниже приведена ссылка https://jsfiddle.net/1712/g6agpoy9/

<!-- language: lang-css --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/site.css" rel="stylesheet" /> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/container.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/grid.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/header.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/menu.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/dropdown.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.min.css" rel="stylesheet" /> 



    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/icon.min.css" rel="stylesheet" /> 

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/segment.min.css" rel="stylesheet" /> 


    .hidden.menu { 
     display: none; 
    } 
    .masthead.segment { 
     min-height: 700px; 
     padding: 1em 0em; 
    } 
    .masthead .logo.item img { 
     margin-right: 1em; 
    } 
    .masthead .ui.menu .ui.button { 
     margin-left: 0.5em; 
    } 
    .masthead h1.ui.header { 
     margin-top: 3em; 
     margin-bottom: 0em; 
     font-size: 4em; 
     font-weight: normal; 
    } 
    .masthead h2 { 
     font-size: 1.7em; 
     font-weight: normal; 
    } 
    .ui.vertical.stripe { 
     padding: 8em 0em; 
    } 
    .ui.vertical.stripe h3 { 
     font-size: 2em; 
    } 
    .ui.vertical.stripe .button + h3, 
    .ui.vertical.stripe p + h3 { 
     margin-top: 3em; 
    } 
    .ui.vertical.stripe .floated.image { 
     clear: both; 
    } 
    .ui.vertical.stripe p { 
     font-size: 1.33em; 
    } 
    .ui.vertical.stripe .horizontal.divider { 
     margin: 3em 0em; 
    } 
    .quote.stripe.segment { 
     padding: 0em; 
    } 
    .quote.stripe.segment .grid .column { 
     padding-top: 5em; 
     padding-bottom: 5em; 
    } 
    .footer.segment { 
     padding: 5em 0em; 
    } 
    .secondary.pointing.menu .toc.item { 
     display: none; 
    } 
    @media only screen and (max-width: 700px) { 
     .ui.fixed.menu { 
     display: none !important; 
     } 
     .secondary.pointing.menu .item, 
     .secondary.pointing.menu .menu { 
     display: none; 
     } 
     .secondary.pointing.menu .toc.item { 
     display: block; 
     } 
     .masthead.segment { 
     min-height: 350px; 
     } 
     .masthead h1.ui.header { 
     font-size: 2em; 
     margin-top: 1.5em; 
     } 
     .masthead h2 { 
     margin-top: 0.5em; 
     font-size: 1.5em; 
     } 
    } 

<!-- language: lang-html --> 



    <!-- Following Menu --> 
    <div class="pusher"> 
     <div class="ui inverted vertical masthead center aligned segment"> 
     <div class="ui container"> 
      <div class="ui large secondary inverted pointing menu"> 
      <a class="toc item"> 
       <i class="sidebar icon"></i> 
      </a> 
      <a class="active item">Home</a> 
      <a class="item">Work</a> 
      <a class="item">Company</a> 
      <a class="item">Careers</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- Sidebar Menu --> 
    <div class="ui vertical inverted sidebar menu"> 
     <a class="active item">Home</a> 
     <a class="item">Work</a> 
     <a class="item">Company</a> 
     <a class="item">Careers</a> 
     <a class="item">Login</a> 
     <a class="item">Signup</a> 
    </div> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/visibility.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.js"></script> 
<!-- language: lang-js --> 

    $(document) 
     .ready(function() { 

     // create sidebar and attach to menu open 
     $('.ui.sidebar') 
      .sidebar('attach events', '.toc.item'); 

     }); 
<!-- end snippet -->

источник

2017-02-08 10:24:30

Это хорошо, но как бы вы обращались к подменю? – pbarney

Отзывчивая замена для меню навигации Semantic UI

ответ

Смежные вопросы