2016-08-03 29 views
7

Die semantische Benutzeroberfläche hat einige Probleme, wenn es um die Menüauswahl geht. Kurz gesagt, reagiert es überhaupt nicht, und die nächste Sache ist ihre "stapelbare" Implementierung, um einfach das Menü als einen Stapel zu zeigen.Responsiver Ersatz für das Navigationsmenü der Semantic UI

Kann hier jemand ein gutes Navigationsmenü empfehlen, das sich gut in semantische ui integriert?

Danke für jede Eingabe.

+0

Können Sie erzählen, wie wollen Sie Ihr ansprechendes Menü aussehen sollte? –

+0

Warum ist Stackable keine gute Lösung? – Weedoze

+1

@Weedoze Da ein stapelbares Hauptnavigationsmenü immer "offen" ist, deckt es den größten Teil der ersten Seite auf einem mobilen Bildschirm ab. Die führende Entwicklung von Semantic sagt, dass es keine Pläne für ein wirklich reaktionsfähiges Menü gibt, also suche ich nach etwas anderem. – pbarney

Antwort

1

Ich habe im Folgenden einen Beispielcode für das Responsive 'Hamburger' Menü unter Verwendung der Semantic UI erstellt. Klicken Sie auf den Link Ganze Seite in JSFiddle, um das Menü in voller Breite anzuzeigen, und ändern Sie dann die Größe Ihres Browsers, um die Reaktionszeit zu sehen.

$('.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>

+0

Ich sehe was du meinst, aber es ist nicht sehr trocken. Die zweimalige Wiederholung der Menüstruktur lässt mich glauben, dass das Navigationsmenü von SUI etwas fehlt. – pbarney

2

minimal HTML und CSS-Code verwenden wir eine ansprechende Menüführung erreichen können, die und kein Javascript erforderlich angepasst werden kann. Bei Verwendung der Off-Canvas-Eigenschaft können wir das Basismenü ausblenden und in der Mobilansicht werden die Menülinks nach links und der Bildschirm in Menü 80% und Inhalt 20% unterteilt. Ich habe Label für das Hamburger-Menü für Mobile verwendet, das Label ist für den Desktop versteckt. Zur Kompatibilität mit dem Browser kommt der Anwendungsfall für Off-Canvas-Menüs im Allgemeinen in Smartphones und Tablets, die mit modernen Browsern ausgestattet sind. Alle Browser mit IE8 und höheren Versionen unterstützen diese Funktion.

Unten ist der Beispielcode des Navigations

@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>

+0

danke! sieht wie ein funktionierendes Beispiel aus. Ich werde versuchen, es auf meiner Website zu implementieren und belohnen Sie dann! –

+0

Vielen Dank ... :) –

+0

Ich habe gerade festgestellt, dass Ihre Lösung nicht genau das ist, was erforderlich ist. Um es zu verwenden, muss ich das Semantic-Menü entfernen. Und ich brauche ein semantisches Menü, das auf Mobiltelefonen zu einem stapelbaren Menü zusammenfallen sollte. –

5

Ich habe meine vorherigen Code geändert und versucht, die semantische UI Navigation ansprechbar zu machen. Dieser HTML-Code basiert auf der semantischen UI, die ich so minimal wie möglich zu halten versuchte, und fügte CSS- und JS-Code für die Übergangsfunktionen hinzu. Ich hoffe das hilft.

Ich habe eine Geige mit dem neuen Code erstellt. unten ist der Link 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 --> 
+0

Das ist gut, aber wie würden Sie Untermenüs ansprechen? – pbarney