[Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB
Si prega di disabilitare gli script di anti adblock per visualizzare questa pagina
NAV
Ciao, ospite! Accedi o Registrati su Stertix.it
LoginRegistrati
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Pubblicità


Tag: Tutorial, Menu, navigazione, discesa, semplice, responsive, MyBB,
Nuova Discussione
Rispondi alla Discussione
 
Valutazione discussione:
  • 0 voti - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Guida [Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB
1041 Visite
Tecnico e Gestore
*******
22.50C
2013 Mar
125
1,346
Amministratore

Grafico
Utente Hacker
Utente Notturno
Youtubers
Messaggio: #1
Thumbs Up Guida [Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB
28/01/2018 17:45

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

Ciao ragazzi,
ho trovato scritto un semplice tutorial sull'aggiunta del menu di navigazione dropdown reattivo in MyBB 1.8, pensavo di doverlo condividere con tutti voi.
Live Demo - http://codepen.io/WallBB/pen/bwwwBL
È un tutorial in 3 passaggi e facile da seguire: -
Passi: -
1. Prima di tutto apri il modello di intestazione che si trova in -> Admin CP > Templates and Styles > Templates > Tuo tema > header Templates > header e aggiungi il codice seguente appena sopra

Codice
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
       <nav>
       <label for="drop" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fa fa-home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fa fa-user" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fa fa-search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fa fa-globe" aria-hidden="true"></i> Advertise</span></a></li>
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fa fa-sort-desc" aria-hidden="true"></i></label>
                   <a href="#">Dropdown</a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul>
               </li>
               <li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i> {$lang->toplinks_help}</span></a></li>
           </ul>
</nav>



2. Vai al tema e fai clic su aggiungi foglio di stile. Scrivi il nome come responsive_menu.css e fai clic su scrivi il mio contenuto.
3. Incollare il contenuto sottostante e fare clic su Salva foglio di stile.

Codice
.toggle, [id^="drop"] {
   display: none;
}
nav {
   background: #333;
   margin: 0;
   padding: 0;
}
nav::after {
   clear: both;
   content: "";
   display: table;
}
nav ul {
   list-style: outside none none;
   margin: 0;
   padding: 0;
   position: relative;
}
nav ul li {
   border-left: 1px solid #555;
   display: inline-block;
   float: left;
   margin: 0;
}
nav a {
   background: #222;
   color: #fff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
nav ul li ul li:hover {
   background: #444 none repeat scroll 0 0;
}
nav a:hover {
   background-color: #000000;
}
nav ul ul {
   display: none;
   position: absolute;
   top: 35px;
}
nav ul li:hover > ul {
   display: inherit;
}
nav ul ul li {
   display: list-item;
   float: none;
   position: relative;
   width: 170px;
}
nav ul ul ul li {
   left: 170px;
   position: relative;
   top: -60px;
}
nav ul li > a::after {
   content: " ";
   display: inline;
   font-family: fontawesome;
}
nav ul li > a:only-child::after {
   content: "";
}
@media all and (max-width: 768px) {
nav {
   margin: 0;
}
.toggle + a, .menu {
   display: none;
}
.toggle {
   background: #333;
   border: medium none;
   color: #ffffff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.toggle:hover {
   background-color: #000000;
}
[id^="drop"]:checked + ul {
   display: block;
}
nav ul li {
   display: block;
   width: 100%;
}
nav ul ul .toggle, nav ul ul a {
   padding: 0 40px;
}
nav ul ul ul a {
   padding: 0 80px;
}
nav a:hover, nav ul ul ul a {
   background-color: #000000;
}
nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a {
   color: #ffffff;
   font-size: 12px;
   padding: 10px 15px;
}
nav ul li ul li .toggle, nav ul ul a {
   background-color: #212121;
}
nav ul ul {
   color: #ffffff;
   float: none;
   position: static;
}
nav ul ul li:hover > ul, nav ul li:hover > ul {
   display: none;
}
nav ul ul li {
   display: block;
   width: 100%;
}
nav ul ul ul li {
   position: static;
}
}
@media all and (max-width: 330px) {
nav ul li {
   display: block;
   width: 94%;
}
}
@media only screen and (min-width: 769px) {
nav ul {
   margin-left: 8%;
}
nav ul ul {
   margin-left: 0;
}
}



Vai al tuo forum dal vivo e vedrai un menu a tendina reattivo per i forum MyBB qualcosa di simile a questo

[Immagine: vG5JAC7.png]

[Immagine: 8HLH5m5.png]

Spero che ti aiuti ottenere un menu reattivo, in caso di domande fammelo sapere.
Saluti


fonte: web

Firma:

Ciao Carò Utente Hai un Problema o una Domanda? bhe allora Contattaci:

Email: info@stertix.it
Skype: Stertix.forum
Facebook: Stertix Forum

EMINEM & RIHANNA
[Immagine: 9vJLLEP.gif][Immagine: AUpdxc9.gif]

Rispondi


Aggiorna il tuo account per nascondere gli annunci pubblicitari.



Facebook Twitter Linkedin MySpace Technorati Digg

Utente(i) che stanno guardando questa discussione: 1 Ospite(i)



Discussioni correlate...
Discussione: Autore Risposte: Letto: Ultimo messaggio
  Guida Menu a tendina sul nickname postbit style vbulletin per mybb Stertix 2 3,043 16/03/2018 22:44
Ultimo messaggio: zCarPixel_
  Menu a livelli multipli con liste annidate Matty039 2 780 06/01/2018 16:04
Ultimo messaggio: Anto88
Information Guida Titoli delle categorie multicolori MyBB Stertix 1 219 19/07/2017 15:53
Ultimo messaggio: Loois
Information Guida Ottimizzare Mybb per l'hosting condiviso Stertix 0 295 03/07/2017 12:32
Ultimo messaggio: Stertix
Information Guida Bloccare contatore visite nei thread per i spiders/bot MyBB Stertix 0 255 16/05/2017 12:22
Ultimo messaggio: Stertix
  Guida Guida come configurare Google SEO MyBB Stertix 0 385 14/05/2017 21:52
Ultimo messaggio: Stertix
Information [1.8] 8 PLUGIN PREMIUM PER MYBB Stertix 0 569 18/01/2017 02:52
Ultimo messaggio: Stertix
  Guida [Nuova Chat]Come Installare Inferno Shoutbox For Mybb Stertix 3 3,764 21/04/2014 01:26
Ultimo messaggio: konoxgaming
Wink Installare Google SEO su MyBB 1.6.5 Matty039 2 1,832 16/03/2014 20:18
Ultimo messaggio: Matty039
  Guida Aggiungere un button all’editor di Mybb Stertix 1 1,045 09/03/2014 14:08
Ultimo messaggio: Giuppi



contatore