Πως να δημιουργήσετε ένα Drop-Down Menu

[sylvester73 27]

Καλησπέρα σας
Συνήθως όταν έχουμε ένα φόρουμ επάνω στο μενού θέλουμε να προσθέσουμε και νέα πράγματα όπως, Επικοινωνια,Φιλικα Sites, και πολλά ακόμα, φυσικά για να κάνουμε αυτή την δουλειά υπάρχει το πρόσθετο Promenu αλλα, γιατί να μπαίνετε στη διαδικασία να κάνετε εγκατάσταση ένα app ενώ μπορείτε να το κάνετε με λιγάκι hmtl Κωδικά?

Για παράδειγμα εμείς επάνω στο φόρουμ έχουμε προσθέσει σαν extra τα ΦΙΛΙΚΑ SITES και επικοινωνία, εσείς μπορείτε να βάλετε ότι θέλετε, άλλα ακόμα και ένα drop-down menu.

Πάμε να δούμε πως θα το κανετε!!
Συνδεθείτε στο ACP του forum σας πηγαίνετε στη καρτέλα Look&Feel Και μετά βρείτε το σκιν που θέλετε και πατήστε στο Manage Templates And Css

Εκεί πέρα κάντε κλικ στο global template και κάντε αναζήτηση γιαυτο εδώ

<li id='nav_home' class=''><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">

{$this->settings['home_name']}</a></li>
                        </if>

Φυσικά μην περιμένετε πάντα να βρίσκετε ακριβώς το ίδιο, έτσι καλύτερα να κάνετε αναζήτηση γιαυτο εδώ, και θα το βρείτε
 

<a href='{$this->settings['home_url']

Για πχ. σε έμενα είχε αυτό εδώ
 

 <li id='nav_home' class='left'><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">

{$this->settings['home_name']}</a></li>
                    </if>

Αφού το βρείτε τότε ακριβώς από κάτω, δηλαδή κάτω από το  </if> βάζετε αυτό εδώ
 

<li id="nav_menu_7" class="right skip_moremenu ">
                            <a id="nav_menu_7_trigger" href="#" title="" class="">Other <span class="dropdownIndicator"></span></a>
                            <div id="nav_menu_7_menucontent" class="submenu_container clearfix boxShadow" style="display: none;

position: absolute; z-index: 9999; background: #8EE46C;">
                                    <div class="left" style="z-index: 10000;">
                                        <ul class="submenu_links" style="z-index: 10000;">
                                            
                                                
                                                    <li class="submenu_li" style="z-index: 10000; color: #fff;"><a href="#"

title="#" style="z-index: 10000; color: #fff; width: auto;">#</a></li>
                                                
                                                    <li class="submenu_li" style="z-index: 10000;"><a href="#" title="#" style="z-

index: 10000; color: #fff; width: auto;">#</a></li>
                                                
                                                    <li class="submenu_li" style="z-index: 10000;"><a href="#" title="#" style="z-

index: 10000; color: #fff; width: auto;">#</a></li>
                                                
                                                    <li class="submenu_li" style="z-index: 10000;"><a href="#" title="#" style="z-

index: 10000; color: #fff; width: auto;">#</a></li>
                                                
                                                    <li class="submenu_li" style="z-index: 10000;"><a href="#" title="#" style="z-

index: 10000; color: #fff; width: auto;">#</a></li>
              
                                        </ul>
                                    </div>
                                </div>
                                <script type="text/javascript">
                                    document.observe("dom:loaded", function(){
                                        //$('content').insert( $('nav_menu_7_menucontent').remove() );
                                        
                                        new ipb.Menu( $('nav_menu_7_trigger'), $('nav_menu_7_menucontent'), { eventType:

'mouseover', closeOnMouseout: 'nav_menu_7' } );
                                    });
                                </script>
                            
                        </li>

Ο Παραπάνω κώδικας δημιουργεί ένα drop-down μενού, σε περίπτωση όμως που θέλετε να προσθέσετε κάτι από διπλά, δηλαδή όπως εμείς έχουμε τα ΦΙΛΙΚΑ SITES Και επικοινωνία, τότε βάζετε κάτω από το </if>  αυτό εδώ
 

<li class="submenu_li" style="z-index: 10000; color: #fff;"><a href="ΛΙΝΚ ΕΔΩ ΠΕΡΑ" title="ΤΙΤΛΟΣ ΕΔΩ ΠΕΡΑ" style="z-index: 10000;

color: #fff; width: auto;">ΤΙΤΛΟΣ ΕΔΩ ΠΕΡΑ</a></li>

Εάν θέλετε ακόμα κάτι από διπλά τότε, βάζετε ακριβώς το ίδιο για 2  φορά

Φυσικά στα επάνω πρέπει να αλλάξετε της ονομασίες και τα λινκ.