[Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB
× Accedi al tuo account

Hai perso la password?
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Menu
NAV
Pubblicità

BETA
Tag: Tutorial, Menu, navigazione, discesa, semplice, responsive, MyBB,
Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5

[Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB

28/01/2018, 17:45
Tutorial 
2194 Visualizzazioni

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



Rispondi

Natnox
Tecnico e Gestore
969
Aggiorna il tuo account per nascondere gli annunci pubblicitari.




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



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