फाउंडेशन 6 टॉप बार ड्रॉपडाउन - ज़र्ब-फाउंडेशन, ड्रॉपडाउन

मैं साइट्स के लिए नई फाउंडेशन 6 देख रहा हूं। मैंने छोटे उपकरणों पर accordion संयोजन, और मध्यम और ऊपर ड्रॉपडाउन एक उत्तरदायी टॉपबार स्थापित किया है।

मेरी समस्या यह है कि मैं यह नहीं समझ सकता कि मेनू आइटम के दाईं ओर, शीर्षबार के नीचे उपमेनस को कैसे दिखाया जाए।

किसी को भी एक विचार मिला? मैं कहाँ से शुरू करू मुझे पता नहीं है। अग्रिम में धन्यवाद :)

स्क्रीनशॉट अब यह कैसा दिखता है

मैंने अपना एचटीएमएल और एससीएसएस संलग्न किया।

/// Media query to show full menu
/// @type String
$topbar-breakpoint:medium !default;
// Navigation background
$navigation-background:$white;
$navigation-font-color:$primary-color;
$navigation-font-hover-color:$white;
$navigation-border-bottom-height:4px; // adjust $navup-desktop-height/$navup-mobile-height accordingly
$navigation-border-bottom-type:solid; // dotted, double, solid, dashed
$navigation-border-bottom-color:$medium-gray;
$navigation-menu-item-background-active:scale-color($primary-color,
$lightness:90%);
/// Logo bar
$logo-height-desktop:2rem;
$logo-padding-desktop:$global-margin;
$logo-bar-background:$navigation-background;
// Navup
$navup-mobile-height:113px;
$navup-desktop-height:132px;
$desktop-nav-background:$navigation-background;
$desktop-submenu-background-hover:$navigation-background;
$desktop-submenu-level1-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level2-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level3-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level4-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-level5-background:scale-color($desktop-nav-background,
$lightness:0%);
$desktop-submenu-border:1px solid $navigation-font-color;
$desktop-menu-has-submenu-padding:1.5rem 1.5rem 1.5rem 1rem;
$desktop-menu-padding:1.5rem;
// Vars: Desktop menu-items border
$desktop-menu-item-border-bottom:$navigation-border-bottom-height $navigation-border-bottom-type $dark-gray;
$desktop-menu-item-border-bottom-hidden:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-background;
$desktop-menu-item-border-bottom-hover:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
// Vars: Desktop menu-items active (border and background)
$desktop-menu-item-background-active:none;
$desktop-menu-item-border-bottom-active:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
$mobile-nav-background:$navigation-background;
$mobile-submenu-padding:1.5rem;
$mobile-submenu-background:$navigation-background;
$mobile-submenu-level1-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level2-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level3-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level4-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-level5-background:scale-color($mobile-submenu-background,
$lightness:-0%);
$mobile-submenu-background-hover:scale-color($mobile-nav-background,
$lightness:-5%);
$mobile-submenu-font-color-hover:$white;
$mobile-menu-item-background-active:$navigation-menu-item-background-active;
$menu-button-background:$white;
$menu-button-color:$primary-color;
$menu-button-padding:1rem;
$menu-button-size:49px;
header.navigation-custom {
box-shadow: 0px 0px 8px 0 rgba($black, .2);
position: fixed;
width: 100%;
background: $navigation-background;
z-index: 1001;
top: 0;
transition: top .3s ease-in-out;
border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $primary-color;
@include breakpoint($topbar-breakpoint) {
border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $navigation-border-bottom-color;
}
// Mobile styling
// Menu styling
.top-bar {
background: none;
z-index: 99999;
bottom: 0;
//// Submenu nested
// Top level
.menu {
ul {
background: none;
}
li {
background: $mobile-submenu-background;
&.menu-item.active {
background: $mobile-menu-item-background-active;
}
&:hover {
background: $mobile-submenu-background-hover;
}
}
// Padding
li:not(.menu-text) > a {
padding: $mobile-submenu-padding;
&: : after {
right: 1.5rem;
}
}
// Level 1
.submenu.nested {
text-indent: 1rem;
li {
background: $mobile-submenu-level1-background;
&: hover {
background: $mobile-submenu-background-hover;
}
a {
&: : after {
text-indent: 0;
}
}
&:first-child {
box-shadow: $global-box-shadow-inset;
}
}
// Level 2
.submenu.nested {
text-indent: 1.5rem;
li {
background: $mobile-submenu-level2-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 3
.submenu.nested {
text-indent: 2rem;
li {
background: $mobile-submenu-level3-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 4
.submenu.nested {
text-indent: 2.5rem;
li {
background: $mobile-submenu-level4-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
// Level 5
.submenu.nested {
text-indent: 3rem;
li {
background: $mobile-submenu-level5-background;
&: hover {
background: $mobile-submenu-background-hover;
}
}
}
}
}
}
}
}
}
// Desktop specific styling
@include breakpoint($topbar-breakpoint) {
// Menu styling
.top-bar {
bottom: -$navigation-border-bottom-height;
//// Submenu nested
// Top level
.menu {
background: none;
li.menu-item {
border-bottom: $desktop-menu-item-border-bottom;
&: hover {
border-bottom: $desktop-menu-item-border-bottom-hover;
}
&.active {
background: $desktop-menu-item-background-active;
border-bottom: $desktop-menu-item-border-bottom-hover;
}
}
li {
background: none;
&: hover {
background: $desktop-submenu-background-hover;
}
&.main-items {
&: hover {
background: none;
}
}
}
> li:not(.logo) > a {
// border-bottom: 4px double red;

}
// Padding
li.has-submenu:not(.menu-text) > a {
padding: $desktop-menu-has-submenu-padding;
}
li:not(.menu-text) > a {
padding: $desktop-menu-padding;
}
// Level 1
.submenu.nested {
text-indent: 0rem;
border: $desktop-submenu-border;
li {
background: $desktop-submenu-level1-background;
border-bottom: $desktop-menu-item-border-bottom-hidden;
&: hover {
background: $desktop-submenu-background-hover;
border-bottom: $desktop-menu-item-border-bottom-hover;
}
&:first-child {
box-shadow: none;
}
}
// Level 2
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level2-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 3
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level3-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 4
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level4-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
// Level 5
.submenu.nested {
text-indent: 0rem;
li {
background: $desktop-submenu-level5-background;
&: hover {
background: $desktop-submenu-background-hover;
}
}
}
}
}
}
}
}
// Float right bar to right
.top-bar-right {
margin-left: auto;
}
}
}
// General styling
.top-bar {
position: relative;
z-index: 1000;
.menu {
&.nested {
margin-left: 0rem;
}
li {
a {
color: $navigation-font-color;
}
}
.submenu {
li {
&.active {
background: $navigation-menu-item-background-active !important;
}
}
}
}
// Downarrow desktop
.menu.menu-items {
> .is-dropdown-submenu-parent.is-right-arrow {
& > a: : after {
border: none;
font-family: "FontAwesome";
content: "f078";
margin-top: 4px;
font-size: 10px;
}
}
}
// Rightarrow desktop
.menu {
> .is-dropdown-submenu-parent.is-right-arrow {
& > a: : after {
border: none;
font-family: "FontAwesome";
content: "f054";
margin-top: 4px;
font-size: 10px;
}
}
}
// Downarrow mobile
.menu {
.is-accordion-submenu-parent {
> a: : after {
border: none;
font-family: "FontAwesome";
content: "f078";
font-size: 10px;
margin-top: -4px;
}
}
.is-accordion-submenu-parent[aria-expanded="true"] {
> a {
font-weight: 700;
&: : after {
margin-top: 4px;
}
}
}
}
}
// logo-bar
.logo-bar {
background: $logo-bar-background;
text-align: center;
@include flex-grid-row;
@include flex-grid-row-align(null, middle);
.logo-container, .social-container {
@include flex-grid-column(6, null);
}
.menu.logo {
background: none;
li.logo {
a {
padding-top: $logo-padding-desktop;
padding-bottom: $logo-padding-desktop;
padding-left: 0;
padding-right: 0;
}
img {
max-height: $logo-height-desktop;
}
&:hover {
background: none;
}
}
}
.social-container {
ul.social-icons {
float: right;
background: none;
@include breakpoint(medium) {
margin-right: 3rem;
}
@include breakpoint(1400) {
margin-right: 0;
}
li {
background: none;
&: hover {
background: none;
}
}
}
}
}
.title-bar {
position: relative;
padding: 0;
background: $mobile-nav-background;
button.menu-button {
height: $menu-button-size;
width: $menu-button-size;
padding: $menu-button-padding;
background: $menu-button-background;
color: $menu-button-color;
}
.title-bar-right {
position: relative;
}
}
// Search field
.title-bar--search-field,
.title-bar--search-button {
margin-bottom: 0;
height: 49px;
@include breakpoint($topbar-breakpoint) {
height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
}
}
input[type="text"].title-bar--search-field {
padding: 0 1rem;
width: 70%;
float: right;
border: 0;
box-shadow: none;
background: $light-gray;
@include breakpoint($topbar-breakpoint) {
padding: 0 1.5rem;
width: 50%;
}
}
.title-bar--search-button {
top: 0;
right: 0;
position: absolute;
z-index: 2;
@include breakpoint($topbar-breakpoint) {
i.fa-search {
position: relative;
top: 25%;
}
}
.icon-search {
top: 0;
}
}
.title-bar--search-field.absolute {
position: absolute;
top: 0;
right: 0;
height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
width: 500px;
}
&.nav-up {
top: -$navup-mobile-height;
@include breakpoint($topbar-breakpoint) {
top: -$navup-desktop-height;
}
}
}
// Nav-up
// navup-body
body {
padding-top: $navup-mobile-height;
@include breakpoint($topbar-breakpoint) {
padding-top: $navup-desktop-height;
}
}
<!-- Navigation-custom start -->
<header class="navigation-custom">

<!-- Top bar top start -->
<div class="logo-bar">
<!-- Logo container start -->
<div class="logo-container">
<ul class="clean-list menu logo">
<li class="logo">
<a href="index.html">
<img src="/images/assets/img/ht-logo-dark.png" alt="logo">
</a>
</li>
</ul>
</div>
<!-- Logo container end -->
</div>
<!-- Top bar top end -->

<!-- Mobile navigation start -->
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button type="button" class="menu-button" data-toggle><i class="fa fa-bars"></i>
</button>
<a class="title-bar--search-button button alert"><i class="fa fa-search"></i></span></a>
<input class="title-bar--search-field" type="text" placeholder="Hva leter du etter?">
</div>
<!-- Mobile navigation end -->

<!-- Desktop navigation start -->
<div class="top-bar" id="main-menu">
<div class="row">
<!-- Top bar bottom end -->
<div class="top-bar-left show-for-medium">
<!-- <ul class="dropdown menu menu-items" data-dropdown-menu>
<li class="logo"><a href="index.html"><img src="/images/assets/img/ht-logo-dark.png" alt="logo"></a></li>
</ul> -->
</div>
<div class="top-bar-left">
<ul class="menu menu-items vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
<!-- Level one -->
<li class="has-submenu menu-item active">
<a href="#">Sider</a>
<ul class="submenu menu vertical nested" data-submenu>
<!-- Level two -->
<li class="has-submenu active">
<a href="#">Sidebyggeren</a>
<ul class="submenu menu vertical nested">
<!-- Level three -->
<li class="active"><a href="pageBuilder--gallery.html">Galleri</a>
</li>
<li><a href="pageBuilder--slideshow.html">Slideshow</a>
</li>
<li><a href="pageBuilder--links-grid.html">Links-grid</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="products-overview.html">Produkter</a>
<ul class="submenu menu vertical nested">
<!-- Level three -->
<li><a href="products-overview.html">Alle produkter</a>
</li>
<li><a href="#">Kategori 1</a>
</li>
<li><a href="#">Kategori 2</a>
</li>
<li><a href="#">Kategori 3</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="services-overview.html">Tjenester</a>
<ul class="submenu menu vertical nested">
<!-- Level Three -->
<li><a href="services-overview.html">Alle tjenester</a>
</li>
<li><a href="services-detail.html">Tjeneste 1</a>
</li>
<li><a href="services-detail.html">Tjeneste 2</a>
</li>
<li><a href="services-detail.html">Tjeneste 3</a>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="information-section.html">Informasjonsstruktur</a>
<ul class="submenu menu vertical nested">
<!-- Level Three -->
<li><a href="information-section.html">Informasjonsside 1</a>
</li>
<li><a href="information-section.html">Informasjonsside 2</a>
</li>
<li><a href="information-section.html">Informasjonsside 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu menu-items vertical medium-horizontal">
<li class="menu-item"><a href="news-overview.html">Nyheter</a>
</li>
<li class="menu-item"><a href="about.html">Om oss</a>
</li>
<li class="menu-item"><a href="contact.html">Kontakt</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Desktop navigation start -->

</header>

उत्तर:

जवाब के लिए 0 № 1

आपकी समस्या मेरे जैसा दिखती हैनेविगेशन / मेनू संरचना और F6: मुझे "ड्रॉपडाउन मेनू" और "उत्तरदायी नेविगेशन" की कार्यक्षमताओं को गठबंधन करने की आवश्यकता है। अंतिम का उपयोग करना (जैसा कि यहां बताया गया है: http://foundation.zurb.com/sites/docs/responsive-navigation.html) मोबाइल (छोटे) दृश्य के लिए ठीक काम कर रहा था: <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" लेकिन कोड के इस टुकड़े में "ड्रॉपडाउन मेनू" के साथ दिया गया है (जैसा कि यहां वर्णित है: http://foundation.zurb.com/sites/docs/dropdown-menu.html) मध्यम + स्क्रीन के लिए: इसके लिए उत्तरदायी नेविगेशन मेनू आइटम के नीचे क्षैतिज शुरू होने वाली ड्रॉपडाउन सूचियों का उत्पादन करती है और नहीं इसके नीचे मेरा समाधान केवल एक ही कोड का दो बार उपयोग करना है, केवल छोटी स्क्रीन के लिए आवश्यक सूची टैग और मध्यम + स्क्रीन के साथ संलग्न है:

संपादित करें: मैंने डेटा-उत्तरदायी-टॉगल ब्रेकपॉइंट को "बड़े" और उल क्लास को डेटा-ड्रिलडाउन मेनू में बदल दिया क्योंकि पहले उपयोग की गई विशेषता data-responsive-menu="drilldown medium-dropdown"ऊपर वर्णित मेरे समाधान के लिए अप्रचलित है।

<div class="top-bar-right hide-for-large"> <ul class="vertical menu" data-drilldown> <li> (...) </li </ul> </div>

(...) तथा

<div class="top-bar-right show-for-large"> <ul class="dropdown menu" data-dropdown-menu> <li> (...) </li </ul> </div>

यह मेरे लिए काम कर रहा है। आप पर एक उदाहरण दिखा सकते हैं http://frickeln.jensfreyer.de/blog। लेकिन कोड के इस अतिरिक्त टुकड़े से बचने के लिए यह बहुत अच्छा होगा। उम्मीद है की यह मदद करेगा!


संबंधित सवाल
सबसे लोकप्रिय