अर्थात् यूआई के मेनू संग्रह की बात आने पर कुछ समस्याएं हैं। संक्षेप में, यह सभी पर उत्तरदायी नहीं है, और इसकी सबसे नज़दीकी चीज मेनू को केवल ढेर के रूप में दिखाने के लिए उनके "स्टैकेबल" कार्यान्वयन है।अर्थात् यूआई के नेविगेशन मेनू के लिए उत्तरदायी प्रतिस्थापन
क्या कोई यहां एक अच्छा नेविगेशन मेनू की सिफारिश कर सकता है जो अर्थपूर्ण यूई के साथ अच्छी तरह से एकीकृत हो?
किसी भी इनपुट के लिए धन्यवाद।
मैंने सेमेन्टिक यूआई का उपयोग करके उत्तरदायी 'हैम्बर्गर' मेनू को कैसे प्राप्त किया है, इस पर नीचे एक नमूना कोड बनाया है। पूर्ण चौड़ाई में मेनू देखने के लिए 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>मैं देखता हूं कि आपका क्या मतलब है, लेकिन यह बहुत शुष्क नहीं है। मेनू संरचना को डुप्लिकेट करने के बाद मुझे दोबारा विश्वास होता है कि एसयूआई के एनवी मेनू सिस्टम में कुछ कमी है। – pbarney
न्यूनतम HTML और सीएसएस कोड हम एक संवेदनशील मेनू नेविगेशन अनुकूलित किया जा सकता है जो प्राप्त कर सकते हैं और कोई जावास्क्रिप्ट की जरूरत का उपयोग कर। ऑफ़-कैनवास संपत्ति का उपयोग करके हम मूल मेनू को छुपा सकते हैं और मोबाइल दृश्य में मेनू लिंक बाईं ओर आते हैं और स्क्रीन मेनू में विभाजित हो जाती है 80% और सामग्री 20%। मैंने मोबाइल के लिए हैम्बर्गर मेनू के लिए लेबल का उपयोग किया है लेबल लेबल के लिए छिपा हुआ है। ब्राउज़र संगतता के लिए आ रहा है ऑफ कैनवास मेनू के लिए उपयोग केस आम तौर पर स्मार्ट फोन और टैबलेट में हैं जो आधुनिक ब्राउज़र के साथ आते हैं। 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>धन्यवाद! एक कामकाजी उदाहरण की तरह दिखता है। मैं इसे अपनी वेबसाइट पर लागू करने की कोशिश करूंगा और फिर आपको इनाम दूंगा! –
धन्यवाद ... :) –
मुझे अभी एहसास हुआ है कि आपका समाधान बिल्कुल आवश्यक नहीं है। इसका उपयोग करने के लिए मुझे अर्थपूर्ण मेनू को हटाने की आवश्यकता है। और मुझे अर्थपूर्ण मेनू की आवश्यकता है जो मोबाइल फोन पर स्टैकेबल मेनू में पतन होनी चाहिए। –
मैं अपने पिछले कोड बदल गया है और अर्थ यूआई नेविगेशन उत्तरदायी बनाने की कोशिश की है है। यह एचटीएमएल कोड अर्थात् यूआई पर आधारित है जिसे मैंने यथासंभव न्यूनतम रखने की कोशिश की है और संक्रमण सुविधाओं के लिए सीएसएस और जेएस कोड जोड़ा है। आशा है कि ये आपकी मदद करेगा।
मैंने नए कोड के साथ एक पहेली बनाई है। नीचे दिए गए लिंक 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 -->
यह अच्छा है, लेकिन आप सबमेनस को कैसे संबोधित करेंगे? – pbarney
आप साझा कर सकते हैं कि कैसे आप अपने उत्तरदायी मेनू की तरह दिखना चाहिए चाहते हैं? –
स्टैकेबल एक अच्छा समाधान क्यों नहीं है? – Weedoze
@Weedoze क्योंकि एक स्टैकेबल मुख्य नेविगेशन मेनू हमेशा मोबाइल स्क्रीन पर पहले पृष्ठ के अधिकांश "कवर" को कवर करता है। सेमेन्टिक के मुख्य विकास में कहा गया है कि वास्तव में उत्तरदायी मेनू बनाने की कोई योजना नहीं है, इसलिए मैं कुछ और ढूंढ रहा हूं। – pbarney