Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Anastasis · November 10, 2016

Πρώτες σκέψεις-Πρώτο σχέδιο

Λοιπόν κατ’αρχάς να δούμε λίγο τι ζητάμε.Θέλουμε ένα panel το οποίο θα περιέχει κάποιο περιεχόμενο και ακριβώς από κάτω του θα υπάρχει ένα κουμπί-μπορεί να είναι μία εικόνα- το οποίο θα το πατάμε και θα μπορούμε να το ανοίξουμε και να το κλείσουμε. Αυτά ουσιαστικά θέλουμε. Άρα λοιπόν ένα πρόχειρο σχέδιο θα μπορούσε να είναι το παρακάτω.

Όπως βλέπουμε έχει 2 περιοχές. Στη μία θα τοποθετήσουμε το περιεχόμενο μας και στην άλλη θα είναι το κουμπί που θα ελέγχουμε την εμφάνιση ή όχι του panel μας.

Δεύτερες σκέψεις-Αναλυτικό σχέδιο

Μάλιστα.Είδαμε παραπάνω πώς θα μοιάζει το sliding panel μας.Τι να τοποθετήσουμε μέσα όμως και πώς;Τι περιεχόμενο να χει; Ας κάνουμε μία δύο σκέψεις.Αυτό το panel θα βρίσκεται κλειστό στην κορυφή της σελίδας μας.Ο χρήστης το βλέπει και το πατάει.Τι θα θελε να δει?Θα μπορούσαμε να του δώσουμε κάποιες πληροφορίες για το site μας,θα μπορούσαμε επίσης να τοποθετήσουμε σημαντικές πληροφορίες όπως το rss feed μας,το twitter μας,το facebook μας,μία φόρμα επικοινωνίας..Επιπροσθέτως θα μπορούσαμε του δείξουμε και κάποια από τα έργα μας,σαν ένα μικρό portfolio.Και πώς μπορώ να το χωρέσω όλα αυτά εκεί; Μήπως να χρησιμοποιούσα κάποιο “κρυφό” χώρο μέσα στο πάνελ;;Ας τα βάλουμε όλα αυτά κάτω και ίσως να μπορούσαμε να σχεδιάσουμε ένα αναλυτικότερο σχέδιο από το προηγούμεν..

Τι θα χρειαστώ για την υλοποίηση και τελικό σχέδιο.

Αφού δημιούργησα το παραπάνω σχέδιο μπορώ να σκεφτώ και κάποια επιμέρους πράγματα.Για να φτιάξω το panel αυτό θα χρησιμοποιήσω html και css σίγουρα.Από κει και πέρα;;Είναι σίγουρο ότι θα χρειαστώ και jQuery διότι όπως είπαμε θα μπορώ να ανοιγοκλείνω το panel.Επίσης θα χρησιμοποιήσω jQuery στο σημείο 3 στην παραπάνω εικόνα όπου θα έχω το κρυφό χώρο,μία κρυμμένη div δηλαδή.Επιπροσθέτως θα χρησιμοποιήσω jQuery στο σημείο που θα έχω το portfolio.Όταν ο χρήστης πατάει πάνω σε μία φωτογραφία αυτή να ανοίγει με ιδιαίτερο τρόπο μέσα στο λεγόμενο “lightbox“.Αυτά γι αρχή.Ας δημιουργήσουμε πρώτα το sliding panel μας με html και CSS και εν συνεχεία του προσθέτουμε ότι λειτουργικότητα θέλουμε.Δείτε παρακάτω ένα τελικό σχέδιο που βοηθάει στην κατανόηση των βασικών divs και κλάσεων που θα χρησιμοποιήσουμε.

Τελικές σημειώσεις και ξεκίνημα της υλοποίησης.

Είμαστε έτοιμοι ουσιαστικά να αρχίσουμε.Θα ήθελα σε αυτό το σημείο να πω ότι το συγκεκριμένο tutorial θα μπορούσε να γίνει και με άλλους τρόπους.Απλά διαλέγουμε ένα και σας τον δείχνουμε με σκοπό να πειραματιστείτε και εσείς μετά.Επίσης θα χρησιμοποιήσουμε κάποια plugins της jQuery πχ για το “lightbox” και θα σας πούμε πώς τα ενσωματώνουμε στο site μας.Δεν θα μπούμε όμως σε περαιτέρω λεπτομέρειες, για παράδειγμα λεπτομερές configuration διότι θα χαθεί ο σκοπός του tutorial αυτού.Θα χρησιμοποιήσουμε και λίγο CSS3.Ας ξεκινήσουμε λοιπόν με τον html κώδικα αλλά και με CSS κώδικα για να δώσουμε από την αρχή το στυλ που θέλουμε.

Κώδικας html-CSS και εξηγήσεις.

Σε αυτό το κομμάτι θα κάνουμε το σκελετό του sliding panel και θα εφαρμόζουμε σιγά σιγά το css έτσι ώστε να δημιουργήσουμε την εμφάνιση που θέλουμε.Ας ξεκινήσουμε.Θα δημιουργήσουμε την div wrapper η οποία περικλείει τα πάντα.Μέσα σε αυτή θα τοποθετήσουμε τις εξής divs με:

1)id=”socializeContainer“:Αυτή η div ουσιαστικά περικλείει την περιοχή 1-περιεχόμενα panel- που είδαμε στην πρώτη φωτογραφία.

2.)id=”socializetitle“:Αυτή η div περιέχει τον τίτλο μας.

3.)id=”portfolioTitle“:Αυτή η div περιέχει τον τίτλο του portfolio μας.

Επίσης θα δημιουργήσουμε 4 divs για τα 4 social εικονίδια μας που θα έχουν μία κοινή κλάση όλα,αφού σε όλα θα εφαρμόζεται το ίδιο css στυλ.Η κοινή κλάση αυτή ονομάζεται “.socialIcons“.H κάθε μία div από αυτές θα έχει διαφορετικό id καθώς θα έχει διαφορετικό εικονίδιο σαν background.Tέλος θα δημιουργήσουμε 3 div με κοινή κλάση “.boxes” η οποία θα μας χρησιμεύσει στο να δώσουμε στυλ στις μικρογραφίες που θα έχουμε στο portfolio.Όσον αφορά την κρυφή div και την div με το κουμπί θα το κάνουμε λίγο αργότερα..
Ας δούμε λίγο κώδικα html και ένα στιγμιότυπο εφαρμόζοντας τα παραπάνω.

Δημιουργήστε ένα αρχείο html.Ονομάστε το “social.html”.Ανάμεσα στα body tags τοποθετούμε:

κώδικας:

<div id="wrapper">



<div id="socializeContainer">


<div id="socializetitle">Socialize with us..Stay in touch!</div>


Εδω μπαίνουν τα εικονίδια
<div class="socialIcons" id="rss" title="rssDiv"></div>
<div class="socialIcons" id="facebook" title="facebookDiv"></div>
<div class="socialIcons" id="twitter" title="twitterDiv"></div>
<div class="socialIcons" id="mail" title="mailDiv"></div>


<div id="portfolioTitle">Mini-Folio! Take a look..</div>
Εδώ μπαίνουν οι φωτό από το portfolio
<div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div>
<div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div>
<div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div>

<br />
</div>
</div>

Μερικές εξηγήσεις.

Βλέπετε πόσο απλός είναι ο κώδικας;Δεν κάναμε κάτι ιδιαίτερο.Το μόνο που κάναμε είναι να “μεταφράσουμε” αυτά που είπαμε παραπάνω.Στις γραμμές 13-16 βλέπετε τις 4 divs που έχουμε δημιουργήσει με σκοπό να τοποθετήσουμε ένα μικρό εικονίδιο μέσα σε αυτές.Όπως παρατηρείτε όλες έχουν μία κοινή κλάση,τη “.socialIcons” και 4 διαφορετικά ids(όλα τα html στοιχεία έχουν πάντα διαφορετικά ids).Επίσης στις γραμμές 21-23 παρατηρείτε τις τρεις div που δημιουργήσαμε και ουσιαστικά είναι οι div που θα μπουν οι μικρογραφίες.

Aς δούμε ένα στιγμιότυπο.

Όλα οκ!Ήρθε η ώρα να εφαρμόσουμε λίγο CSS ώστε να δείξει καλύτερα αυτό που φτιάξαμε.Δημιουργήστε ένα αρχείο css και ονομάστε το “styles.css”. Τοποθετήστε το μέσα στον ίδιο φάκελο που τοποθετήσατε το “social.html”. Ανάμεσα στα head tags της “social.html” τοποθετήστε το link:

κώδικας:

Είμαστε έτοιμοι.Ξεκινάμε την εφαρμογή του CSS κώδικα.

Εφαρμογή CSS κώδικα

Εφαρμόζουμε στυλ στα παραπάνω,εξηγούμε και βλέπουμε ένα στιγμιότυπο.Σημαντική σημείωση!!Από τον παραπάνω κώδικα html αφαιρούμε τα “σχόλια” που έχουμε γράψει όπως για παράδειγμα στις γραμμές 16,24 κλπ: “Εδώ μπαίνουν τα εικονίδια”,”εδώ μπαίνει ο τίτλος” κλπ.

κώδικας:

*{margin:0;padding:0;}

#wrapper {
width:264px;
margin: 0 auto;
top:0;
left:300px;
position:absolute;}

#socializeContainer{
height:auto;
z-index:200;
border:5px solid #585858;
overflow:hidden;
float:left;
width:254px;

}

#socializetitle{
width:100%;
background-color: #E9E9E9;
color: #3F3F3F;
padding: 0;
font-family:Kristen ITC;
font-size:16px;
text-align:center;
border-bottom:3px solid gray;
margin-bottom:2px;

}

.socialIcons{

width:36px;
height:36px;
margin-top:5px;
margin-bottom:1px;
float:left;
margin-left:20px;
border:1px solid blue;
}

#portfolioTitle{
margin-top:5px;
margin-bottom:3px;
width:100%;
font-family: Kristen ITC;
background: #E9E9E9;
color: #999999;
font-size:18px;
text-align: center;
float:left;
}

Εξηγήσεις-Θα κάνουμε αρκετή ανάλυση στα πιο σημαντικά:

Γραμμή 1:Επειδή όλα τα html στοιχεία (πχ divs,paragraphs,images κλπ) έχουν προκαθορισμένα margins και paddings χρησιμοποιούμε το ‘*’ το οποίο ονομάζεται universal selector και αυτός “μηδενίζει” ουσιαστικά τα margins και τα paddings των στοιχείων.Με αυτό τον τρόπο κάνουμε reset στα margins και paddings των στοιχείων και εν συνεχεία μπορούμε να εφαρμόσουμε τα δικά μας paddings και margins.

Γραμμή 3:Εδώ δηλώνουμε κάποιους κανόνες CSS που θα εφαρμόσουμε στη wrapper div.Η wrapper div περιλαμβάνει και το panel και το κουμπί του.Με το “position:absolute;” δηλώνουμε ότι η τοποθέτηση του στοιχείου αυτού θα είναι “απόλυτη” δηλαδή θα την ορίσουμε εμείς χρησιμοποιώντας τις css properties “top”,”left”,”right” και “bottom”.Αυτός είναι και ο λόγος που τοποθετούμε την wrapper div top:0; και left:300px;.Δηλαδή θα απέχει 0px από την κορυφή της σελίδας και 300px από αριστερά.Εάν θέλετε να μάθετε περισσότερα για τo position:absolute δείτε εδώ.

Γραμμή 10:Εδώ ορίζουμε το CSS στυλ που θα εφαρμόσουμε στη div με id = “socializeContainer“.Είναι το container που περιέχει τα πάντα εκτός από το κουμπί του slider.Η ιδιότητα z-index:200 κάνει το εξής:Ορίζει ποιο html element είναι πάνω από ένα άλλο.Το html στοιχείο με το μεγαλύτερο z-index μπαίνει πάνω από τα υπόλοιπα.Αυτό το ορίζουμε εδώ γιατί θέλουμε όταν ανοίγει αυτό το panel να φαίνεται ότι βρίσκεται πάνω από οποιοδήποτε άλλο html στοιχείο της σελίδας.Για παράδειγμα από κάτω από το sliding panel μπορεί να υπάρχει μία div με navigation.Ρυθμίζοντας το z-index σε ένα αριθμό μεγάλο εξασφαλίζουμε ότι όταν ανοίξει το panel προς τα κάτω θα εμφανιστεί από πάνω από το navigation.Να το καλύπτει δηλαδή.

Σε αυτή τη div ρυθμίζουμε επίσης το border μας και το πλάτος της που είναι ουσιαστικά το πλάτος των περιεχομένων της.Το overflow:hidden δηλώνει πως εάν βάλουμε κάτι στη div “socializeContainer” το οποίο θα έχει μεγαλύτερο πλάτος από αυτή τότε ό,τι περισσεύει κόβεται.Το float-left:δηλώνει πώς η div αυτή είναι όσο πιο αριστερά γίνεται στο μέσα στο element που την περιέχει δηλαδή στο στη “wrapper div“.

Γραμμή 20:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόσουμε στη div με id “socializetitle”.Είναι η div που θα περιέχει τον τίτλο μας και θα βρίσκεται πάνω – πάνω στo socializeContainer μας.Δεν υπάρχει κάτι σημαντικό να εξηγήσουμε εδώ.Το width: 100% μας δηλώνει ότι η div αυτή στο σημείο που βρίσκεται καταλαμβάνει το 100% του πλάτους του στοιχείου που την περιέχει-δηλαδή της div socializeContainer.

Γραμμή 33:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόζονται σε όποιο στοιχείο έχει κλάση τη “.socialIcons“.Δηλώνουμε τα margins που θέλουμε , το float κλπ.Παρατηρείστε ότι δίνουμε ένα border:1px solid blue.Αυτό το κάνουμε διότι ναι μεν ορίζουμε την κλάση αλλά από την στιγμή που δεν έχουμε εικονίδια δεν θα δούμε κάτι εάν δούμε τη σελίδα μας σε ένα browser.Το border αυτό θα μας δείξει ουσιαστικά που θα βρίσκονται τα εικονίδια αυτά.Παρατηρήστε ότι ορίσαμε πλάτος και ύψος 32*32 pixels.Τέτοιο θα είναι το μέγεθος των εικονιδίων μας.

Γραμμή 44:Εδώ ορίζουμε το στυλ CSS που θα εφαρμόσουμε στη div η οποία θα περιέχει τον τίτλο που θα έχουμε στο mini portfolio μας.

Μετά από όλα αυτά ας δούμε ένα στιγμιότυπο

Τέλεια!Βλέπετε που θα τοποθετηθούν τα εικονίδια;;Λείπει κάτι όμως…..Κάτω από τον τίτλο του portfolio δεν υπάρχει μέρος που θα τοποθετηθούν οι μικρογραφίες μας.Θυμάστε που είπαμε ότι οι τρεις μικρογραφίες θα μπουν σε 3 divs που θα εφαρμόζεται σε αυτές μία κλάση -η “.boxes“.Ας τη φτιάξουμε λοιπόν τώρα!Στον παραπάνω css κώδικα προσθέστε:

κώδικας:

.boxes
{

width:64px;
height:64px;
border:5px solid #dadada;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-bottom:5px;
margin-top:6px;
}

Εδώ προσθέσαμε και την κλάση “boxes”.Για να δούμε τώρα πως μοιάζει η εφαρμογή μας.

Τέλεια…Μήπως να κάνουμε και το socializeContainer μας να έχει στρογγυλεμένες άκρες; Θα το κάνουμε με CSS3!Προσθέστε μέσα στο CSS που καθορίζει την εμφάνιση της socializeContainer div τις εξής εντολές:

κώδικας:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Αυτές οι εντολές πάνε πάντα μαζί και δηλώνουν ότι στο συγκεκριμένο στοιχείο που εφαρμόζονται,ότι οι γωνίες του έχουν στρογγυλέψει κατά 10px.Για να δούμε τώρα την εφαρμογή μας.

Νομίζω ότι μία χαρά πάμε.Για να προσθέσουμε και εικονίδια τώρα και να δούμε πως θα μοιάζει τελικά.

Προσθήκη των εικονιδίων και μικρογραφιών στο sliding panel μας.

Τα εικονίδια που θα χρησιμοποιήσουμε τα κατεβάσαμε από τη σελίδα 108 high resolution dark social media icons.Στην συνέχεια διαλέξαμε ποια θέλαμε και τα επεξεργαστήκαμε για να έχουμε μέγεθος 32*32px.Κατεβάστε τα και εσείς.Τα τοποθετούμε σε ένα φάκελο με το όνομα “img” και ξεκινάμε….

Αυτά είναι τα εικονίδια που θα μπουν στα divs με class=”socialicons” και ανάλογα με το id της κάθε μίας div από αυτές θα τοποθετήσουμε το ανάλογο εικονίδιο σαν background.Στο αρχείο μας css προσθέτουμε τις εξής γραμμές αφού πρώτα διαγράψουμε το border που υπάρχει στη class “socialIcons”.Δεν το θέλουμε πλέον.

κώδικας:

#rss{

background:url(img/rss_small.png);
}

#facebook{

background:url(img/facebook_small.png);
}

#twitter{

background:url(img/twitter_small.png);
}

#mail{

background:url(img/mail_small.png);
}

Για να δούμε τώρα :

Τέλεια…Ας τοποθετήσουμε και τις μικρογραφίες των φωτογραφιών.Εδώ θα λειτουργήσουμε ως εξής:Θα δημιουργήσουμε 6 εικόνες.Οι τρεις από αυτές θα είναι σε μέγεθος 64*64 (βλέπε class “boxes”).Οι άλλες τρεις θα έχουν ότι μέγεθος θέλουμε.Ουσιαστικά θα έχουμε 3 μικρογραφίες και 3 αντίστοιχες φωτογραφίες κανονικού μεγέθους.Όταν πατάμε σε μία μικρογραφία θα ανοίγει η αντίστοιχη “μεγάλη” φωτογραφία.Θα κάνουμε τις μικρογραφίες “links”, να πατιούνται δηλαδή.Αυτό το κάνουμε γιατί στο δεύτερο μέρος θα χρησιμοποιήσουμε και ένα jQuery plugin ,το lightbox που μιλήσαμε στην αρχή.
Στον html κώδικα που έχουμε θα κάνουμε το εξής:Θα προσθέσουμε σε κάθε μία div με class “boxes” μία μικρογραφία κάνοντας την link.Άρα στο σημείο εκείνος ο κώδικας html θα γίνει:

κώδικας:

<div class="boxes">

<a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a>

</div>


<div class="boxes">

<a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a>

</div>


<div class="boxes">

<a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a>

</div>

Για να δούμε τώρα τη σελίδα μας….

Να προσθέσουμε τώρα και το κουμπί του panel;;

Προσθήκη κουμπιού sliding panel

Το κουμπί αυτό θα είναι ένα image ουσιαστικά το οποίο θα τοποθετηθεί αμέσως μετά το κλείσιμο της socialContainer div και πριν το κλείσιμο της wrapper div..Η εικόνα αυτή θα βρίσκεται μέσα σε μία div με class = “.handler”.Στον html κώδικα προσθέστε την εξής γραμμή στο σημείο που είπαμε παραπάνω..

κώδικας:

και στο CSS αρχείο ας δημιουργήσουμε το CSS στυλ που θα εφαρμοστεί σε αυτή την κλάση:

κώδικας:

.handler
{
float:left;
margin-left:30px;
}

Με αυτό το CSS κώδικα κάνουμε τη φωτογραφία μας να πάει όσο πιο αριστερά γίνεται και εν συνεχεία της δίνουμε 30px περιθώριο από αριστερά σε σχέση με το wrapper.Αποτέλεσμα;Aς δούμε λίγο τη σελίδα μας τώρα…

Επίλογος πρώτου μέρους και live demo..

Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα τρία μέρη του tutorial αυτού!

Το πρώτο μέρος έφτασε στο τέλος του….Ήταν λίγο κουραστικό αλλά άξιζε τον κόπο.Στο επόμενο μέρος θα δούμε τη δημιουργία της κρυφής περιοχής καθώς και τη λειτουργικότητα της “εφαρμογής”¨με χρήση jQuery.Επίσης θα μπορέσετε να κατεβάσετε τα αρχεία που χρησιμοποιήθηκαν καθώς και τις πηγές μας.Σας ευχαριστούμε πολύ!!

Sign In

Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity