Arata sau ascunde meniul pentru partea de mobil intr-un site. Acest articol analizeaza doua optiuni pentru a realiza acest lucru: utilizarea JavaScript si exploatarea clasei CSS: target pseudo.
Structura html de body arata asa:
<body id="body">
<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
<article>
<!-- main content here -->
</article>
<nav id="main_nav">
<ul>
<li><a href="">This</a></li>
<li><a href="">That</a></li>
<li><a href="">The other</a></li>
<!-- etc. -->
</ul>
<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>
</body>
Afisarea si ascunderea
Vom incepe pagina noastra cu o zona de continut vizibila si o navigare ascunsa. Deci, putem incepe cu acest CSS:
#main_nav {
display: none;
}
Probabil, nu veti dori ca site-ul dvs. principal sa inceapa astfel – de obicei, doriti ca navigatia sa fie disponibila tuturor pentru a le vedea. Puteti directiona aceasta navigare ascunsa in mod special in instante ale unor ecrane mai mici, desi folosind interogari media. In acest fel, o astfel de abordare vine in joc frumos atunci cand se adapteaza un design pentru dispozitivele mobile.
JavaScript
Modul cel mai evident pentru a activa si a dezactiva afisarea navigarii este utilizarea JavaScript. Urmatorul exemplu poate fi folosit ca o modalitate de a adauga si de a elimina un atribut de clasa (în acest caz „cu_nav”) corpului atunci când se face clic pe linkul „Skip to top”:
var nav = document.getElementById('access_nav'),
body = document.body;
nav.addEventListener('click', function(e) {
body.className = body.className? '' : 'with_nav';
e.preventDefault();
});
:target
Alternativ, putem evita JavaScript. Pseudo clasa tinta poate fi utilizata pentru a modela un element tinta intr-o pagina, adica un element HTML cu un ID. In acest caz, elementul tinta este acela cu ID-ul „main_nav” – zona principala de navigare. Deci, atunci când cineva selectează link-ul „Sari la navigare”, pagina va sari la „main_nav” si apoi putem schimba acea casetă în mod diferit:
#main_nav:target {
display: block;
}
Acum nu numai ca pagina va trece la zona de navigare aparuta brusc cand este selectata optiunea „Salt la navigare”, cand este selectată ulterior „Salt la început”, navigația va disparea din nou. Acest lucru se datorează faptului că „main_nav” nu ar mai fi ancora tinta.
Stilizare
Nu vrem ca pagina sa sara in jos, vrem ca navigarea sa apara maiestuos in apropierea legaturii de instigare. O solutie evidenta este pur si simplu pozitionarea navigatiei in partea de sus a paginii:
#main_nav {
display: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
}
Putem pregati legaturile noastre pentru a fi mai asemanatoare cu butoanele si le putem plasa în pozitii mai bune:
.access_aid {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 0;
padding-top: 40px;
overflow: hidden;
border: 1px solid #ccc;
}
© 2025 - Toate drepturile rezervate.