Πίσω στο ευρετήριο

Highlight selected menu page Posted: 12-Mar-2020 11:56 AM

javascript, html, css tutorial
Δες το Demo Κατέβασε τα αρχεία 3 downloads

Είναι πολύ χρήσιμο όταν πλοηγούμαστε σε ένα website να γνωρίζουμε σε ποια σελίδα βρισκόμαστε.
Αυτή την αναφορά μας την δίνει το κεντρικό μενού του ιστότοπου, τουλάχιστον τις περισσότερες φορές, φωτίζοντας το ανάλογο menu link.
Ας δούμε παρακάτω πως θα το πετύχουμε αυτό με css και javascript.
Για το παράδειγμα μας έχουμε 4 σελίδες που θα πλοηγούμαστε ανάμεσα τους.

  • Έχουμε το index.html όπου είναι η αρχική μας σελίδα.
  • Και έχουμε άλλες τρεις την products.html την pricelist.html και την contact.html
  • Έχουμε το style.css για τις css κλάσεις
  • Και το script.js για την javascript

index.html

Στο html αρχείο έχουμε το μενού πλοήγησης, δεν υπάρχει τίποτα το ιδιαίτερο.
Έχουμε 4 links μέσα σε μια ul λίστα που περικλείετε από ένα nav tag, και έχουμε δώσει στην αρχική μας σελίδα την κλάση "active"
Και έχουμε και το link στο javascript αρχείο.


<nav>
   <ul>
      <li><a href="index.html">Αρχική</a></li>
      <li><a href="products.html">Προϊόντα</a></li>
      <li><a href="pricelist.html">Τιμοκατάλογος</a></li>
      <li><a href="contact.html">Επικοινωνία</a></li>
   </ul>
</nav>

<script src="script.js"></script>
  

style.css

Στο css αρχείο έχουμε ένα απλό στόλισμα(decoration) της navbar όπου ορίζουμε το χρώμα στο φόντο, λίγη σκίαση, το υψος της γραμματοσειράς, έχουμε ένα transition στην γραμμή 23,και στην γραμμή 30 έχουμε την active class που θα χρειαστούμε στην javascript.


nav{
	width: 100%;
	background-color: #4267b2;
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}

nav ul{
	width: 100%; 
}

nav li{
	display: inline-block;
	margin: 0;
}

nav a{
	display: inline-block;
	text-decoration: none;
	padding: 15px 15px;
	color: #fff;
	font-size: 16px;
	transition: all 0.2s ease-in-out;
}

nav a:hover{
	background-color: red;
}

nav .active{
	background-color: red;
}
  

script.js


/**
 * Μέσα στην function highlight Θα τρέξουμε έναν βρόχο πάνω σε όλα τα <a> tags 
 * που έχουμε στην <nav> και με ένα if block θα τσεκάρουμε εάν η τιμή του href
 * υπάρχει στο url του browser.
 * Εαν η δήλωση είναι αληθής τότε θα προσθέσουμε την κλάση active στο <a> tag
 * και θα τερματίσουμε την συνάρτηση ως αληθής. 
 * Με αυτόν το τρόπο θα έχουμε το highlight στο menu link.
 */
function highlightLink(){
	for(let link of document.querySelectorAll('#navbar a')){
		if(document.URL.match(link.href)){
			link.className = "active";
			return true;
		}
	}
}

/**
 * Στήν περίπτωση που η function highlight δεν είναι αληθής, θα προσθέσουμε
 * την "active" κλάση στην αρχική μας σελίδα. Αυτό μπορεί να συμβεί κατά
 * την πρώτη επίσκεψη στην ιστοσελίδα όπου ο browser δεν προβάλει τα index
 * αρχεία στο url.
 */
if(highlightLink() != true){
	document.querySelectorAll('#navbar a')[0].className = "active";
}  

Για περισσότερες πληροφορίες πάνω στις συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια css tutorials

Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript.

php Tutorials

Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

javascript Tutorials

Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')