ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 1 Ιουνίου 2013

CSS, ΚΑΘΕΤΟ Hover Menu

   Ο παρακάτω κώδικας αποτελεί ένα απλό κάθετο hover μενού,που ανοίγει με την τοποθέτηση του κήνσορα πάνω του.Τον τοποθετούμε απλά σαν  Gadget στο μπλοκ μας με τον κλασικό τρόπο.
  Τον συγκεκριμένο καλό θα ήταν να έμπαινε στην αριστερή πλευρά της ταμπλέτας μας.
  Πάμε σύνδεση στο blogger>Σχεδίαση >διάταξη>προσθήκη Gadget>HTML/JavaScript και επικολλούμε τον παρακάτω κώδικα.

        <style type="text/css">

#global-nav {
    width: 181px;
    float: left;
    background: #A3FF0F;
}

#global-subnav {
    width: 181px;
    background: #EDEDED;
}

#global-nav a {
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 15px;
    line-height: 15px;  
    text-indent: 6px;              
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

#global-nav ul{
    background: #009F00;
    padding: 0;
    margin: 0;
}

#global-subnav ul{
    background: #249111;
    position: relative;
    top: -10px;
    left: 30px;
}

#global-nav li{
    list-style: none;  
    border-bottom: #31FF1E solid;
    border-width: 3px;
}

#global-nav ul ul li{
    display:none;
}

#global-nav li:hover {
    background: #00248C;
}

#global-nav li:hover ul li{
    display:block;
}

</style>

<div id="global-nav">
    <ul>
        <li><a href="#One">ΑΘΗΝΑ</a>
            <div id="global-subnav">
                <ul>
                    <li><a href="#A">A</a></li>
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#Two">ΘΕΣΣΑΛΟΝΙΚΗ</a>
            <div id="global-subnav">
                    <ul>
                        <li><a href="#1">ενα</a></li>
                        <li><a href="#2">δυο</a></li>
                        <li><a href="#3">τρια</a></li>
                        <li><a href="#4">τεσσερα</a></li>
                        <li><a href="#5">πεντε</a></li>
                        <li><a href="#6">εξι</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>


Το πρώτο τμήμα του, <style>, ρυθμίζουμε τα χρώματα του και τις διαστάσεις του
Το δεύτερο είναι το Κυρίως  μενού μας.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.