So reduzieren Sie das Element beim Laden der Seite

Question

Wie kann ein div (Menü) ausgeblendet werden, wenn eine HTML-Seite geladen wurde? Ich habe versucht, den folgenden Code zu verwenden, aber es funktioniert nicht, da das Menü sichtbar bleibt.

Wenn die Seite geladen ist, möchte ich das Menü nur auf zusammengelegt werden. Wenn das Menü kollabiert ist, sollte die Schaltfläche menu + lauten. Wenn das Menü angezeigt wird, sollte der Button menu -

$('#togglelink').click(function() { 
 
    $('ul').toggle(300); 
 
    if ($(this).text() == "menu +") 
 
    $(this).text("menu -") 
 
    else 
 
    $(this).text("menu +"); 
 
})

.wrapper { 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 10px auto 10px auto; 
 
    border: 2px solid #000000; 
 
    background-color: #0099cc; 
 
} 
 

 
@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    font-family: 'Work Sans', sans-serif; 
 
} 
 

 
.wrapper h1 { 
 
    font-size: 2.75em; 
 
    line-height: 100%; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 

 
/*Header menu*/ 
 

 
#menu { 
 
    background: #ffffff; 
 
    width: auto; 
 
    margin-bottom: 5px; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    /* \t display: block; 
 
*/ 
 
    zoom: 1; 
 
    /* Added the following for flexbox */ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#menu ul:after { 
 
    content: ' '; 
 
    display: block; 
 
    font-size: 0; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
#menu ul li { 
 
    /* \t float: left; 
 
*/ 
 
    display: block; 
 
    padding: 0; 
 
    /* Added the following for flexbox */ 
 
    flex-grow: 1; 
 
} 
 

 
#menu ul li a { 
 
    color: #000; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 15px 25px; 
 
    font-family: 'Work Sans', sans-serif; 
 
    font-size: 1.5em; 
 
    font-weight: 500; 
 
    position: relative; 
 
    -webkit-transition: color .25s; 
 
    -moz-transition: color .25s; 
 
    -ms-transition: color .25s; 
 
    -o-transition: color .25s; 
 
    transition: color .25s; 
 
    /* Added the following for flexbox */ 
 
    /* So that text appear visually centered */ 
 
    text-align: center; 
 
} 
 

 
#menu ul li a:hover { 
 
    color: #000; 
 
} 
 

 
#menu ul li a:hover:before { 
 
    width: 100%; 
 
} 
 

 
#menu ul li a:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 0; 
 
    background: #000; 
 
    -webkit-transition: width .25s; 
 
    -moz-transition: width .25s; 
 
    -ms-transition: width .25s; 
 
    -o-transition: width .25s; 
 
    transition: width .25s; 
 
} 
 

 
#menu ul li.last > a:after, 
 
#cssmenu ul li:last-child > a:after { 
 
    display: none; 
 
} 
 

 
#menu ul li.active a { 
 
    color: #000; 
 
} 
 

 
#menu ul li.active a:before { 
 
    width: 100%; 
 
} 
 

 
.menu_toggle { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 

 

 
    #menu ul li { 
 
    float: none; 
 
    width: 100%; 
 
    } 
 
    #menu ul li a { 
 
    width: 100%; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    } 
 
    #menu ul li a:after { 
 
    display: none; 
 
    } 
 
    #menu ul li a:before { 
 
    height: 1px; 
 
    background: #000; 
 
    width: 100%; 
 
    opacity: .2; 
 
    } 
 
    #menu ul li.last > a:before, 
 
    #cssmenu ul li:last-child > a:before { 
 
    display: none; 
 
    } 
 
    .menu_toggle { 
 
    visibility: visible; 
 
    background-color: white; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 16px; 
 
    font-size: 1.5em; 
 
    padding: 0.5em 2em; 
 
    font-weight: 500; 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
    cursor: pointer; 
 
    } 
 
    .menu_toggle:active { 
 
    background-color: black; 
 
    color: white; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div> 
 
    <h1>Hello World</h1> 
 
    </div> 
 
    <div> 
 
    <button class="menu_toggle" tabindex="0" id="togglelink">menu +</button> 
 
    </div> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a><span>January</span></a> 
 
     </li> 
 
     <li><a><span>February</span></a> 
 
     </li> 
 
     <li><a><span>March</span></a> 
 
     </li> 
 
     <li><a><span>April</span></a> 
 
     </li> 
 
     <li><a><span>May</span></a> 
 
     </li> 
 
     <li><a><span>June</span></a> 
 
     </li> 
 
     <li><a><span>July</span></a> 
 
     </li> 
 
     <li><a><span>August</span></a> 
 
     </li> 
 
     <li><a><span>September</span></a> 
 
     </li> 
 
     <li><a><span>October</span></a> 
 
     </li> 
 
     <li><a><span>November</span></a> 
 
     </li> 
 
     <li><a><span>December</span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <p> 
 
    Hello World 
 
    </p> 
 
</div>

window.innerWidth < 769 Bildschirme

window.innerWidth> 769 Bildschirme

Answer 1

Aufgrund Sie display: flex, eine der einfachsten Möglichkeiten, erfordert dies zu tun ist Mit JS müssen Sie nur eine hide() Funktion vor dem Klick hinzufügen.

Dies zeigt dann immer noch Ihr Menü als display: flex an, da das Hinzufügen eines display: none das Menü zu display: block ändert, wenn es geöffnet ist.

$(document).ready(function() { 
 
    if(window.innerWidth < 769) { 
 
    $('#menu ul').hide(); 
 
    } 
 
    $('#togglelink').click(function() { 
 
    $('ul').toggle(300); 
 
    if ($(this).text() == "menu +") 
 
     $(this).text("menu -") 
 
    else 
 
     $(this).text("menu +"); 
 
    }) 
 
});

.wrapper { 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 10px auto 10px auto; 
 
    border: 2px solid #000000; 
 
    background-color: #0099cc; 
 
} 
 

 
@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    font-family: 'Work Sans', sans-serif; 
 
} 
 

 

 
.wrapper h1 { 
 
    font-size: 2.75em; 
 
    line-height: 100%; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 

 
/*Header menu*/ 
 
#menu { 
 
    background: #ffffff; 
 
    width: auto; 
 
    margin-bottom: 5px; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    /* \t display: block; 
 
*/ 
 
    zoom: 1; 
 
    /* Added the following for flexbox */ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#menu ul:after { 
 
    content: ' '; 
 
    display: block; 
 
    font-size: 0; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
#menu ul li { 
 
    /* \t float: left; 
 
*/ 
 
    display: block; 
 
    padding: 0; 
 
    /* Added the following for flexbox */ 
 
    flex-grow: 1; 
 
} 
 

 
#menu ul li a { 
 
    color: #000; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 15px 25px; 
 
    font-family: 'Work Sans', sans-serif; 
 
    font-size: 1.5em; 
 
    font-weight: 500; 
 
    position: relative; 
 
    -webkit-transition: color .25s; 
 
    -moz-transition: color .25s; 
 
    -ms-transition: color .25s; 
 
    -o-transition: color .25s; 
 
    transition: color .25s; 
 
    /* Added the following for flexbox */ 
 
    /* So that text appear visually centered */ 
 
    text-align: center; 
 
} 
 

 
#menu ul li a:hover { 
 
    color: #000; 
 
} 
 

 
#menu ul li a:hover:before { 
 
    width: 100%; 
 
} 
 

 
#menu ul li a:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 3px; 
 
    width: 0; 
 
    background: #000; 
 
    -webkit-transition: width .25s; 
 
    -moz-transition: width .25s; 
 
    -ms-transition: width .25s; 
 
    -o-transition: width .25s; 
 
    transition: width .25s; 
 
} 
 

 
#menu ul li.last > a:after, 
 
#cssmenu ul li:last-child > a:after { 
 
    display: none; 
 
} 
 

 
#menu ul li.active a { 
 
    color: #000; 
 
} 
 

 
#menu ul li.active a:before { 
 
    width: 100%; 
 
} 
 

 
.menu_toggle { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 

 

 
    #menu ul li { 
 
    float: none; 
 
    width: 100%; 
 
    } 
 
    #menu ul li a { 
 
    width: 100%; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    } 
 
    #menu ul li a:after { 
 
    display: none; 
 
    } 
 
    #menu ul li a:before { 
 
    height: 1px; 
 
    background: #000; 
 
    width: 100%; 
 
    opacity: .2; 
 
    } 
 
    #menu ul li.last > a:before, 
 
    #cssmenu ul li:last-child > a:before { 
 
    display: none; 
 
    } 
 
    .menu_toggle { 
 
    visibility: visible; 
 
    background-color: white; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 16px; 
 
    font-size: 1.5em; 
 
    padding: 0.5em 2em; 
 
    font-weight: 500; 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
    cursor: pointer; 
 
    } 
 
    .menu_toggle:active { 
 
    background-color: black; 
 
    color: white; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div> 
 
    <h1>Hello World</h1> 
 
    </div> 
 
    <div> 
 
    <button class="menu_toggle" tabindex="0" id="togglelink">menu +</button> 
 
    </div> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a><span>January</span></a> 
 
     </li> 
 
     <li><a><span>February</span></a> 
 
     </li> 
 
     <li><a><span>March</span></a> 
 
     </li> 
 
     <li><a><span>April</span></a> 
 
     </li> 
 
     <li><a><span>May</span></a> 
 
     </li> 
 
     <li><a><span>June</span></a> 
 
     </li> 
 
     <li><a><span>July</span></a> 
 
     </li> 
 
     <li><a><span>August</span></a> 
 
     </li> 
 
     <li><a><span>September</span></a> 
 
     </li> 
 
     <li><a><span>October</span></a> 
 
     </li> 
 
     <li><a><span>November</span></a> 
 
     </li> 
 
     <li><a><span>December</span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <p> 
 
    Hello World 
 
    </p> 
 
</div>

Answer 2

Helloo,

In Ihrem @media screen and (max-width: 768px) Versuchen Sie:

#menu ul { 
    display:none; 
} 

Fiddle: https://jsfiddle.net/rq2a3b4b/1/

Answer 3

Probieren Sie diese Antwort https://jsfiddle.net/alfinpaul/umbtL1wq/2/

\t var windowSize = $(window).width(); // Could've done $(this).width() 
 
    if(windowSize < 768){ 
 

 

 
$('#menu ul').each(function(){ 
 
$(this).slideUp(); 
 
}); 
 
    } 
 
$('#togglelink').click(function() { 
 
    $('ul').toggle(300); 
 
    if ($(this).text() == "menu +") 
 
    $(this).text("menu -") 
 
    else 
 
    $(this).text("menu +"); 
 
})

.wrapper { 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 10px auto 10px auto; 
 
    border: 2px solid #000000; 
 
    background-color: #0099cc; 
 
} 
 

 
@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    font-family: 'Work Sans', sans-serif; 
 
} 
 

 

 
/*'FACH Technical Support' title*/ 
 

 
.wrapper h1 { 
 
    font-size: 2.75em; 
 
    line-height: 100%; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 

 
/*Header menu*/ 
 

 
#menu { 
 
    background: #ffffff; 
 
    width: auto; 
 
    margin-bottom: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div> 
 
    <h1>Hello World</h1> 
 
    </div> 
 
    <div> 
 
    <button class="menu_toggle" tabindex="0" id="togglelink">menu +</button> 
 
    </div> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a><span>January</span></a> 
 
     </li> 
 
     <li><a><span>February</span></a> 
 
     </li> 
 
     <li><a><span>March</span></a> 
 
     </li> 
 
     <li><a><span>April</span></a> 
 
     </li> 
 
     <li><a><span>May</span></a> 
 
     </li> 
 
     <li><a><span>June</span></a> 
 
     </li> 
 
     <li><a><span>July</span></a> 
 
     </li> 
 
     <li><a><span>August</span></a> 
 
     </li> 
 
     <li><a><span>September</span></a> 
 
     </li> 
 
     <li><a><span>October</span></a> 
 
     </li> 
 
     <li><a><span>November</span></a> 
 
     </li> 
 
     <li><a><span>December</span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <p> 
 
    Hello World 
 
    </p> 
 
</div>