7
के लिए सफारी में मेनू सामग्री अपने माता-पिता को ओवरफ़्लो नहीं करती है मैंने वेबसाइट पर बूटस्ट्रैप 3 का उपयोग करके एक मेनू बनाया है। यह मेनू आपके द्वारा परीक्षण किए गए प्रत्येक ब्राउज़र में और किसी भी स्क्रीन आकार में ठीक काम करता है।आईओएस
आईओएस पर सफारी को छोड़कर, जहां मेनू बिल्कुल दिखाई नहीं देता था।
सीएसएस का उपयोग करके, मैंने चौड़ाई को भरने और 640 पीएक्स लंबा होने के लिए मेनू के कंटेनर को मजबूर कर दिया। तब मैं मेनू देख सकता था। तो समस्या अतिप्रवाह के साथ प्रतीत होता है।
हालांकि, कंटेनर माता-पिता और दादाजी के पास एक संचित पैडिंग है जो आईओएस पर सफारी को छोड़कर किसी भी ब्राउज़र (जिसे मैंने परीक्षण किया है) में कोई फर्क नहीं पड़ता है। यह screetshot संख्या 2.
में देखा जा सकता कुछ नियम
मेनू आईडी header-menu साथ <ul> तत्व की बात कर रहा है Clearifying। इसे नीचे स्क्रीनशॉट में लाल चिह्नित किया गया है।
अभिभावक वर्ग navbar-ex1-collapse वर्ग के साथ immidiate माता-पिता को प्रतिबिंबित कर रहा है। यह नीचे स्क्रीनशॉट में नीला चिह्नित है।
समस्या
पुनः मैं अंत में माता-पिता के लिए position: absolute; जोड़कर क्रोम में एक ही समस्या को पुन: करने में सक्षम था।
स्क्रीनशॉट
चेक बाहर कोड स्निपेट:
\t (function($){
\t \t $("#header-menu .menu-item-has-children > a, #header-menu .menu-item-has-children > span.after").on('click', function(e) {
\t \t \t e.preventDefault();
\t \t \t if($(this).parent().hasClass('hide-sub')){
\t \t \t \t $(this).parent().addClass("show-sub").removeClass("hide-sub");
\t \t \t }else{
\t \t \t \t $(this).parent().addClass("hide-sub").removeClass("show-sub");
\t \t \t }
\t \t });
\t \t
\t \t $("#header-menu .close-menu-button > span.before").on('click', function(e) {
\t \t \t e.preventDefault();
\t \t \t if($(this).parent().parent().parent().hasClass('hide-sub')){
\t \t \t \t $(this).parent().parent().parent().addClass("show-sub").removeClass("hide-sub");
\t \t \t }else{
\t \t \t \t $(this).parent().parent().parent().addClass("hide-sub").removeClass("show-sub");
\t \t \t }
\t \t });
\t })(jQuery);
\t
\t
\t@charset "utf-8";
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#header-menu {
float: right
}
@media (max-width: 991px) {
.navbar-default .navbar-toggle {
background: rgba(255, 255, 255, 0.05);
border: 0 none;
border-radius: 0
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #d23479
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d23479
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
background: rgba(255, 255, 255, 0.25);
border: 0;
box-shadow: none
}
.navbar-collapse {
margin-top: 10px
}
}
@media(max-width:991px) {
.navbar-nav>li>a {
line-height: 70px;
}
.nav>li {
font-size: 35px;
}
.navbar-nav {
width: 100%;
text-align: center;
margin: 0px;
}
}
/*meny*/
@media (min-width: 992px) {
#header-menu .only-mobile,
#header-menu a span {
display: none !important;
}
#header-menu > li {
position: static;
}
#header-menu > li > a {
display: inline-block;
}
#header-menu > li > a:active {
color: #d23479;
}
#header-menu > li > a:focus {
color: white;
}
#header-menu > li > ul.sub-menu {
display: block;
background-color: white;
padding: 30px;
width: 100%;
height: 100vh;
min-height: 640px;
max-height: 768px;
position: absolute;
z-index: 100;
left: 0;
}
#header-menu > li > ul.sub-menu > li {
display: table;
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu {
display: table-row;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li {
display: table-cell;
width: 25%;
padding: 15px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:first-of-type {
padding: 15px 15px 15px 0;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:last-of-type {
padding: 15px 0 15px 15px;
}
#header-menu > li > ul.sub-menu > li.sub-menu-row:first-of-type > ul.sub-menu > li a {
display: block;
padding: 5px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
font-size: 14px;
color: black;
border-width: 0 0 1px 0;
border-style: solid;
margin: 0 0 10px 0;
font-weight: 600;
border-color: #d23479;
text-transform: uppercase;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li {
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: gray;
font-size: 12px;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu-row:nth-of-type(2) {
margin-top: 50px;
border-width: 1px 0 0 0;
border-color: lightgray;
border-style: solid;
}
#header-menu .sub-menu-row:nth-of-type(2) > ul.sub-menu > li > a {
text-transform: none;
font-weight: 300 !important;
border: none;
}
#header-menu .contact a {
color: #d23479 !important;
}
#header-menu [class*="icon-"]:before {
font-size: 26px;
color: #d23479;
float: left;
margin: 0 10px;
position: relative;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu > .menu-item-has-children.hide-sub > span.after:before {
content: '';
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/DropDown-Arrow.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 15px;
height: 15px;
}
#header-menu > .menu-item-has-children.show-sub > span.after:before {
background: none;
content: '×';
font-size: 27px;
font-weight: 300;
line-height: 1.2em;
font-family: serif;
vertical-align: middle;
color: #d23479;
}
#header-menu > .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu > .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu .sub-menu .close-menu-button {
display: block;
position: absolute;
bottom: 130px;
}
#header-menu .sub-menu .close-menu-button span.before {
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
cursor: pointer;
}
#header-menu .sub-menu .close-menu-button span.before:before {
content: '×';
color: #d23479;
font-size: 42px;
font-family: serif;
font-weight: bold;
line-height: 32px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header-menu .sub-menu .close-menu-button span.before:after {
content: 'Lukk meny';
text-transform: uppercase;
color: #ccc;
font-size: 12px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
@media (max-width: 991px) {
#header-menu button.navbar-toggle {
display: inline-block;
width: 42px;
height: 32px;
background-color: #d23479;
position: absolute;
top: 15px;
right: 30px;
}
#header-menu button.navbar-toggle:before {
content: '×';
color: white;
font-family: serif;
font-size: 32px;
vertical-align: top;
line-height: 16px;
}
#header-menu {
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
z-index: 10;
overflow: scroll;
margin-top: 0;
padding: 102px 20px 20px 20px;
}
#header-menu .only-computer {
display: none !important;
}
#header-menu > li,
#header-menu .sub-menu li {
text-align: left;
border-top: 1px solid #ccc;
}
#header-menu .show-sub > ul.sub-menu {
border-top: 1px solid #ccc;
}
#header-menu a {
display: inline-block;
line-height: 1.4em;
text-transform: uppercase;
font-weight: 400;
padding: 0;
color: #222;
font-size: 18px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > a {
color: #444;
font-size: 15px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: #666;
font-size: 13px;
font-weight: 300;
}
#header-menu > li > a:active,
#header-menu > li.show-sub > a {
color: #d23479;
}
#header-menu ul.sub-menu {
padding-left: 15px;
}
#header-menu .menu-item-1350 > .sub-menu {
padding: 0;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu > li:first-of-type,
#header-menu .sub-menu-row,
#header-menu .bottom-contact-info,
#header-menu .bottom-contact-info li {
border: none !important;
}
#header-menu .menu-item-has-children.hide-sub span {
display: none;
}
#header-menu .menu-item-has-children.hide-sub > a {} #header-menu .menu-item-has-children > a {
width: 100%;
display: inline-block;
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 98% 50%;
}
#header-menu .menu-item-has-children.hide-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/down-arrow-menu.png');
}
#header-menu .menu-item-has-children.show-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/right-arrow-menu.png');
}
#header-menu .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu > li:first-of-type,
#header-menu .bottom-contact-info > .sub-menu {
border-top: 1px solid #d23479;
padding: 0;
}
#header-menu .bottom-contact-info a {
color: #333;
}
#header-menu [class*="icon-"]:before {
font-size: 20px;
color: #d23479;
margin: 0 10px;
position: relative;
text-transform: none;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu .inactive > a,
#header-menu .inactive > span,
#header-menu a span {
display: none;
}
#header-menu .logo {
position: absolute;
top: 10px;
left: 30px;
border: 0;
}
#header-menu .logo > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/images/logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 34px;
width: 167px;
}
}
/* Fixing the menu for Safari on iOS */
.dropdown-backdrop {
position: static !important;
}
.navbar-ex1-collapse {
z-index: 99999;
}
.collapse.in {
background-color: white;
width: 100%;
height: 640px;
position: fixed;
display: block;
overflow: scroll;
position: static !important;
}
#header-menu {
z-index: 99999 !important;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul id="header-menu" class="nav navbar-nav main_menu">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"></button>
<li id="menu-item-956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-956"><span class="before"></span><a href="#prosjekter">Prosjekter</a><span class="after"></span>
</li>
<li id="menu-item-1502" class="hide-sub menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1502"><span class="before"></span><a href="#tjenester">Tjenester</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1350" class="sub-menu-row inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1350"><span class="before"></span><a href="#"><span>Undermeny</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1317" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1317"><span class="before"></span><a href="#">Nettsteder</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1503"><span class="before"></span><a href="#responsiv-hjemmeside">Responsiv Hjemmeside</a><span class="after"></span>
</li>
<li id="menu-item-1504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1504"><span class="before"></span><a href="#nettbutikk">Nettbutikk</a><span class="after"></span>
</li>
<li id="menu-item-1318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1318"><span class="before"></span><a href="#landingsider">Landingsider</a><span class="after"></span>
</li>
<li id="menu-item-1332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1332"><span class="before"></span><a href="#">WordPress</a><span class="after"></span>
</li>
<li id="menu-item-1333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1333"><span class="before"></span><a href="#">Webdesign</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1314" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1314"><span class="before"></span><a href="#">Synlighet</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1505"><span class="before"></span><a href="#google-annonsering">Google Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1335" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1335"><span class="before"></span><a href="#">Facebook Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1316"><span class="before"></span><a href="#sokemotoroptimalisering">Søkemotoroptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1507"><span class="before"></span><a href="#fa-flere-henvendelser">Få flere henvendelser</a><span class="after"></span>
</li>
<li id="menu-item-1315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1315"><span class="before"></span><a href="#konverteringsoptimalisering">Konverteringsoptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1509"><span class="before"></span><a href="#forbedring-av-innhold">Forbedring av Innhold</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1338" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1338"><span class="before"></span><a href="#">Hosting</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1500"><span class="before"></span><a href="#hosting">Webserver/Webhotell/ E-post</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1340" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1340"><span class="before"></span><a href="#">Support</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1341" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1341"><span class="before"></span><a href="#">Driftsstatus server</a><span class="after"></span>
</li>
<li id="menu-item-1342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1342"><span class="before"></span><a href="#">Support</a><span class="after"></span>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1349" class="sub-menu-row inactive only-computer menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1349"><span class="before"></span><a href="#"><span>Kontaktinfo PC</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1344" class="contact inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-1344"><span class="before"></span><a href="#">Kontakt oss:</a><span class="after"></span>
</li>
<li id="menu-item-1345" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1345"><span class="before"></span><a href="tel:+4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1346" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1346"><span class="before"></span><a href="mailto:[email protected]">[email protected]</a><span class="after"></span>
</li>
<li id="menu-item-1347" class="icon-mapmarker menu-item menu-item-type-custom menu-item-object-custom menu-item-1347"><span class="before"></span><a href="#">Company address, 9999 Ziptown</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1528" class="only-computer close-menu-button menu-item menu-item-type-custom menu-item-object-custom menu-item-1528"><span class="before"></span><a href="#"><span>Lukk meny</span></a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><span class="before"></span><a href="#hvem-er-box-media">Hvem er Box Media</a><span class="after"></span>
</li>
<li id="menu-item-1501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1501"><span class="before"></span><a href="#aktuelt">Aktuelt</a><span class="after"></span>
</li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><span class="before"></span><a href="#kontakt-oss">Kontakt oss</a><span class="after"></span>
</li>
<li id="menu-item-1527" class="bottom-contact-info only-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1527"><span class="before"></span><a href="#"><span>Kontaktinfo mobil</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1522" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1522"><span class="before"></span><a href="tel:++4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1523" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1523"><span class="before"></span><a href="mailto:[email protected]">[email protected]</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1525" class="logo only-mobile menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-36 current_page_item menu-item-1525"><span class="before"></span><a href="#"><span>Hjem</span></a><span class="after"></span>
</li>
</ul>
</div>
</nav>
कोड सहायता मांगने वाले प्रश्नों में इसे पुन: पेश करने के लिए आवश्यक सबसे छोटा कोड शामिल होना चाहिए ** प्रश्न में ही ** अधिमानतः [** स्टैक स्निपेट **] (https://blog.stackoverflow.com/2014/09/ शुरू-runnable-जावास्क्रिप्ट-सीएसएस और एचटीएमएल-कोड-के टुकड़े /)। यद्यपि आपने एक ** ** एक उदाहरण या साइट ** के लिए लिंक प्रदान किया है) (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- कैन-आई-बस-पेस्ट-ए-लिंक-टू-इट), अगर लिंक अमान्य हो गया था, तो आपका प्रश्न अन्य भविष्य के लिए समान मूल्य वाले उपयोगकर्ताओं के लिए कोई मूल्य नहीं होगा। –
ठीक है, जानकारी @Paulie_D के लिए धन्यवाद। मैं जल्द ही अपना प्रश्न अपडेट करूंगा। –
क्या आपने 'व्यूपोर्ट' मेटा टैग जोड़ा है –