CSS: 9ο Μάθημα

Επανάληψη

Άσκηση Ευαγγελίας https://evasworkplace.w3spaces.com/ :

Πολύ καλή υλοποίηση και ιδέα!

Μερικές παρατηρήσεις:

μπορείς να έχεις σε διαφορετικό φάκελο μέσα στο w3spaces διαφορετική άσκηση. Άρα μπορείς ουσιασικά να έχεις πολλά sites, το καθένα στον δικό του φάκελο.
για να πηγαίνει στην αρχική σελιδα με κλικ στο λογότυπο, βάζουμε a href="/"
στο κεντρικό και δεξί μέρος του μενου η στοίχιση δεν είναι στο κέντρο κατακόρυφα γιατί ενώ το ύψος του γονέα #menu .duo { και #menu .tria { είναι 70px ενώ το line-height το δηλώνεις τη μία 100px και 90px αντίστοιχα ενώ έπρεπε να είναι 70px; (να γίνει επίδειξη με το dev tools πατώντας F12)

Ψευδοκλάσεις

Οι ψευδοκλάσεις επιλέγουν καταστάσεις των στοιχείων (elements), π.χ. όταν μετακινήσω το ποντίκι πάνω από το στοιχείο.

α) Απλή χρήση της :hover πάνω από a.

a:hover{
    font-style: italic;
}

α) :hover σε συνδυασμό με :not()

β) βάζω τα inputs και προσθέτω την ψευδοκλάση focus

<p class="p1">Lorem ...</p>
<input type="text">
<p class="p2">Lorem ...</p>
<input type="text">
<p class="p3">Lorem ...</p>
 <input type="email" name="" id="">

p:not(.p1):not(.p3):hover{
    background-color: beige;
    color: red;
    font-size: 1.2em;
}
input:focus{
    background-color:cornflowerblue;
}

γ) first-of-type, last-of-type και :nth-of-type(n):

Eπιλέγει το πρώτο, το τελευταίο ή το n-οστό αντίστοιχα, παιδί του γονέα.

p:first-of-type{
    border:2px solid red;
}
p:last-of-type{
    border:2px solid blue;
}
p:nth-of-type(2){
        border: 4px dotted green;
}

Η διαφορά με p:first-child με p:first-of-type…

Με την ψευδοκλάση :invalid επιλέγω τα inputs για τα οποία δεν συμφωνούν τα δεδομένα του χρήστη με τον τύπο του input, π.χ. με το input email παραπάνω

input:invalid{
    background-color: tomato;
}

Simple Tooltip Hover

Πολύ καλό παράδειγμα!

<style>
p.gostp{
    display: none;
    background-color: greenyellow;
}
div.gostdiv:hover p{
    display:block;
    width: 100px;
    height: 40px;
    border:1px solid red;
    position: relative;
    left: 60px;
    top:-30px;
}
</style>

<div class="gostdiv">
    Πέρνα από πάνω μου για να εμφανιστώ!
    <p class="gostp">
        Τώρα με βλέπεις!!!
    </p> 
</div>

Από τη λίστα στο https://www.w3schools.com/css/css_pseudo_classes.asp δείξαμε αρκετά και μένουν αρκετά ακόμη για να ψάξετε και να δοκιμάσετε…

https://www.w3schools.com/css/css_pseudo_classes.asp

Νέα Ύλη

Pseudo Elements

Τα ψευδοστοιχεία για να επιλέξουμε συγκεκριμένα μέρη ενός στοιχείου (element). Π.χ. το πρώτο γράμμα μιας παραγράφου.
Για τη σύνταξή τους (από την CSS3 ) χρησιμοποιούμε διπλό : δηλαδή :: όπως p::first-letter για να διαχωρίζουμε τα ψευδοστοιχεία από τις ψευδοκλάσεις (αν και μπορείτε να δείτε παλιές υλοποιήσεις ψευδοστοιχείων με μονό “:”).

https://www.w3schools.com/css/css_pseudo_elements.asp

Τα κυριότερα: selection, before, after, ::first-line Pseudo-element (μόνο για block elements), ::first-letter Pseudo-element (μόνο για block elements)

::selection

Δουλεύει με backgound-color και color (επίσηςμε τα λιγότερα συνηθισμένα cursor και outline)

p::selection{
    background-color: black;
    color: white;
}

p::first-letter{
    color: yellowgreen;
    background-color: black;
    padding:12px;
    font-size: 3em;
    border: 4px solid #888;
}

Να συνδυαστεί σε παράδειγμα με το p::first-line

Συνήθως αποφεύγουμε το first-letter (μπορούμε να το αντικαταστοίσουμε με χρήση του span) και first-line.

::selection

::selection {
  color: white;
  background: black;
}

::before και ::after

Κατασκευή λίστας, χωρίς κουκίδες, δημιουργία κουκίδων με span.

<ul>
    <li><span></span> Δευτέρα</li>
    <li><span></span>Τρίτη</li>
    <li><span></span>Τετάρτη</li>
    <li><span></span>Πέμπτη</li>
    <li><span></span>Παρασκευή</li>
</ul>

ul{
    list-style-type: none;
    padding-left: 0;
}
ul span{
    display: inline-block;
    background-color: blue;
    width: 12px;
    height: 12px;
    margin: 0 8px;

μπορεί να γίνει με το ψευδοστοιχείο ::before.

ul li::before{
    content: '🍕';
    margin-right:12px; 
    color: red;
}

Μπορώ να βάλω και μετά το element με το ::after

ul li{
    background-color: aquamarine;  /*για να βλέπω την περιοχή*/
    max-width: 300px;   /* για να περιορίσω το πλάτος */
}
ul li::after{
    content: '🐚 μπορώ να γράψω κιόλας!';
    margin-right:12px; 
    color: red;
    background-color:rgb(204, 245, 204);
    float: right; /* ώστε να είναι στοιχισμένα δεξιά*/
}

Μπορούμε να βάλουμε περιεχόμενο από την css!
Μπορούμε να εισάγουμε στοιχεία εύκολα.
Το χρησιμοποιούμε αρκετά με τα μενού και τα εικονίδια που χρησιμοποιούν.

Απλό οριζόντιο Μενού

Υπάρχουν αρκετοί τρόποι. Ακολουθεί ένας απλός με το nav και a

    <nav>
        <a href="#">home</a> 
        <a href="#">contact </a>
        <a href="#">products</a>
        <a href="#">company</a>
    </nav>

body{
    background-color: #dee;
    margin:0;
}
nav{
    background-color: brown;
    height: 40px;
    line-height: 40px;
    padding:8px
}
nav a{
    background-color: wheat;
    padding: 4px;
    text-decoration: none;  
    margin:0 4px; 
    color: black;
}
nav a:hover{
    background-color: black;
    color:white;
    border:2px solid white;
}

Dropdown Menu

<body>
    <h1>Home - Main menu</h1>
    <div class="dropdown">
        <span>Πέρνα από πάνω...!</span>
        <ul>
            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>
        </ul>
    </div>
</body>

body{
    margin: 0;
    background-color: #eee;
}
.dropdown{
    background-color: burlywood;
    width: 200px;
    padding: 4px;
}
.dropdown span{
    display: block;
}
.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
}
.dropdown ul li a{
    text-decoration: none;
    display: block;
    padding: 4px;
}

Α’ τρόπος απόκρυψης μενού

.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    max-height: 0;
    overflow: hidden;
}

Για να σταματήσει η απόκρυψη προσθέτω το:

.dropdown:hover ul{
    max-height: 200px;
}

Προτιμάμε αυτή τη λύση γιατί το max-height μπορεί να χρησιμοποιηθεί για animation:

.dropdown ul{ ..
. transition: all 0.5s ease;}

Βάζουμε και radious και margin στο μενού:

.dropdown{…
border-radius: 4px;
margin: 10px;
}

Τελική υλοποίηση Α’ τρόπου:

.dropdown{
    background-color: burlywood;
    width: 200px;
    padding: 4px;
    border-radius: 4px;
    margin: 10px;
    border-radius: 4px;
}
.dropdown:hover ul{
    max-height: 2000px;
}
.dropdown span{
    display: block;
}
.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}
.dropdown ul li a{
    text-decoration: none;
    display: block;
    padding: 4px;
}

Β’ τρόπος απόκρυψης μενού

Βγάζουμε τις 2 γραμμές με max-height και το transition. Ουσιαστικά είναι το παράδειγμα με το display:none σε block που παρουσιάστηκε παραπάνω.

Δηλαδή κάνουμε display:none στη λίστα .dropdown ul{

Και display: block; στο .dropdown:hover ul{

.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    display:none;
    /* max-height: 0; */
    overflow: hidden;
    /* transition: all 0.5s ease; */
}
.dropdown:hover ul{
    /* max-height: 2000px; */
    display: block;
}

+ Δεν χρειάζεται να ξέρουμε το ύψος του μενού. Αφού ειναι block και μεγαλώνει όσο χρειαστεί σε αντίθεση με την προηγουμενη μέθοδο.
– Δεν μπορεί να γίνει animation

Επιστρέφουμε και συνεχίζουμε με τον Α’ Τρόπο

Βάζουμε p πάνω και κάτω από το μενού. Παρατηρούμε ότι όταν ανοίγει απωθεί την κάτω p .

Μπορώ να βάλω ένα element πάνω από τα άλλα με το position.

Προσθέτουμε .dropdown ul{ position:absolute. To μενού εμφανίζεται αλλά χωρίς το background του γονέα. Γιατί πλέον ο γονέας δεν ξέρει που βρίσκεται το παιδί του (το ul) και δεν μεγαλώνει για να το συμπεριλάβει…! ´Αρα έχουμε ένα πρόβλημα.

Αν πάω και βάλω στον γονέα .dropdown{ height:300px τότε αυτό είναι μόνιμο και το βγάζω.

Οπότε προσθέτω το background-color: greenyellow ; και ορίζω το δικό του φόντο.

.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    position:absolute;
    background-color: greenyellow ;
}

Προφανώς αφού δεν έβαλα top και left τότε μένει στη θέση του. Όμως σε σχέση με ποιόν;

Προσθέτωντας στο .dropdown ul{

top: 0;
left:0;

Με το παραπάνω πηγαίνει στον relative γονέα που είναι το body και το μενού πάει πάνω-αριστερά.

To διορθώνω βάζοντας το μενού ώς relative γονέα:

.dropdown{… position:relative;

και επειδή πέφτει πάνω στο μενού το κατεβάζω με δοκιμές 24px. Αν το κατεβάσω πολύ π.χ. 40px τότε εμφανίζεται κενό στο οποίο όταν περνάει το ποντίκι του χρήστη το μενού εξαφανίζεται.

Βγάζω από το .dropdown{ το .dropdown{ height:300px

Αλλάζω και το .dropdown ul{ … background-color: green; και προσθέτω και width:100%; και πλέον μεγαλώνει όσο ο relative γονέας.

Προσθέτω στο κάτω μέρος καμπύλες στις γωνίες 8px:

.dropdown:hover ul{
    max-height: 1000px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

Βγάζω τις καμπύλες από τον γονέα όταν ανοίγει το μενού:

.dropdown:hover{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;  
}

Προσθέτω σε .dropdown:hover ul{ και .dropdown{ περίγραμμα:

    border:1px solid black;

Βλέπουμε ότι το μενού είναι 1px δεξιά από τον γονέα, οπότε πάμε στο .dropdown ul{ και βάζουμε left:-1px;

οπότε ο τελικός κώδικας γίνεται:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Home - Main menu</h1>
    <div class="dropdown">
        <span>Πέρνα από πάνω...!</span>
        <ul>
            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>
        </ul>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique at ducimus, molestiae officia sunt cupiditate consectetur tenetur saepe voluptates fuga? Laboriosam recusandae eveniet reprehenderit? Optio aspernatur nisi quos inventore ullam!</p>    
    
</body>
</html>

body{
    margin: 0;
    background-color: #eee;
}
.dropdown{
    background-color: burlywood;
    width: 200px;
    padding: 4px;
    border-radius: 4px;
    margin: 0 0 0 10px;
    position:relative;
    border:1px solid black;
}
.dropdown:hover{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; 
}
.dropdown span{
    display: block;
}
.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    max-height: 0;
    overflow: hidden;
    /* transition: all 0.5s ease; */
    position:absolute;
    background-color: greenyellow;
    width:100%;
    top: 27px;
    left:-1px;
}
.dropdown:hover ul{
    max-height: 2000px;
    border:1px solid black;
}
.dropdown ul li a{
    text-decoration: none;
    display: block;
    padding: 4px;
}

Άσκηση+portableapps

9μτ1.08

CSS: 9ο Μάθημα

Επανάληψη

Ψευδοκλάσεις

Νέα Ύλη

Pseudo Elements

::selection

::selection

::before και ::after

Απλό οριζόντιο Μενού

Dropdown Menu

Α’ τρόπος απόκρυψης μενού

Β’ τρόπος απόκρυψης μενού

Επιστρέφουμε και συνεχίζουμε με τον Α’ Τρόπο

Διδασκαλία Πληροφορικής

Προγραμματισμός

Linux

Python

Διδασκαλία Πληροφορικής

Εκπαιδευτικά

Φύση- Επιστήμη-DIY

Ενδιαφέρουσες σελίδες

Ιστοσελίδες συναδέλφων

Arduino