[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

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

2070 Visite
Tecnico e Gestore
*******
5,056.50C
03/2013
118
1,022
Gestori
Messaggio: #1
Thumbs Up  Tutorial [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@natnox.com
Twitter: Natnox
Facebook: Natnox

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

Rispondi


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 6,647 16/03/2018, 22:44
Ultimo messaggio: zCarPixel_
  Menu a livelli multipli con liste annidate Matty039 2 1,061 06/01/2018, 16:04
Ultimo messaggio: Anto88
Information Tutorial Titoli delle categorie multicolori MyBB Natnox 1 366 19/07/2017, 15:53
Ultimo messaggio: Loois
Information Tutorial Ottimizzare Mybb per l'hosting condiviso Natnox 0 453 03/07/2017, 12:32
Ultimo messaggio: Natnox
Information Tutorial Bloccare contatore visite nei thread per i spiders/bot MyBB Natnox 0 393 16/05/2017, 12:22
Ultimo messaggio: Natnox
  Tutorial Guida come configurare Google SEO MyBB Natnox 0 594 14/05/2017, 21:52
Ultimo messaggio: Natnox
Information [1.8] 8 PLUGIN PREMIUM PER MYBB Natnox 0 743 18/01/2017, 02:52
Ultimo messaggio: Natnox
  Tutorial [Nuova Chat]Come Installare Inferno Shoutbox For Mybb Natnox 3 3,863 21/04/2014, 01:26
Ultimo messaggio: konoxgaming
Wink Installare Google SEO su MyBB 1.6.5 Matty039 2 1,993 16/03/2014, 20:18
Ultimo messaggio: Matty039
  Tutorial Aggiungere un button all’editor di Mybb Natnox 1 1,159 09/03/2014, 14:08
Ultimo messaggio: Giuppi