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

Resposive navbar with css and javascript Posted: 05-Mar-2020 21:24 PM

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

Έχουμε ένα responsive οριζόντιο μενού πλοήγησης γραμμένο σε css και javascript για μικρές(κάτω απο 600px) και μεγάλες οθόνες.

  • Έχουμε γράψει τα script μας σε τρία αρχεία στο index.html
  • Tις css κλάσεις μας στο style.css
  • Και την javascript στο αρχείο script.js

index.html


<!-- Έχουμε συμπεριλάβει στο html την βιβλιοθήκη εικονιδίων(icons) font-awesomε  -->
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Για το μενού έχουμε ενα div με 5 <a> tags για τα links,
έχουμε δώσει την κλάση navigation και id nav για να έχουμε
ένα σημείο αναφοράς στο css και javascript  -->
<div class="navigation" id="nav">
  <a href="#" class="active">Aρχική</a>
  <a href="#">Προΐόντα</a>
  <a href="#">Τιμοκατάλογος</a>
  <a href="#">Επικοινωνία</a>
  <!-- Η function showMenu() θα ανοιγοκλείνει το μενού σε μικρή
  οθόνη -->
  <a class="icon" onclick="showMenu()" >
    <i class="fa fa-bars"></i>
  </a>
</div>

  

style.css


/* Ορίζουμε το φόντο, το max μέγεθος σε 1024px, κεντραρισμένο */
.navigation {
  background-color: #000;
  overflow: hidden;
  max-width: 1024px;
  margin: 0 auto;
  box-shadow: 0px 3px 3px rgba(0,0,0,.3);
}

/* Εχουμε το στυλ απο τα <a> tags  */
.navigation a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color .3s;
}

/* Αλλάζουμε το φόντο και το χρώμα όταν πέρναει ο κέρσορας */
.navigation a:hover {
  background-color: green;
  box-shadow: 0 0 10px #1f4287 inset;
}

/* Έχουμε μια κλάση active για να αλλάζουμε το φόντο όταν
βρισκόμαστε στην ενεργή σελίδα */
.navigation a.active {
  background-color: #278ea5;
  color: white;
  box-shadow: 0 0 10px #1f4287 inset;
}

/* Κρύβουμε το εικονίδιο που μας επιτρέπει να εμφανίζουμε
το μενού σε μικρές οθόνες */
.navigation .icon {
  display: none;
}

/* Όταν η οθόνη είναι μικρότερη από 600px κρύβουμε όλα τα links
εκτός από το πρώτο ("Αρχική"). Και εμφανίζουμε στα δεξιά το 
εικονίδιο (.icon) που μας επιτρέπει να ανοιγοκλείνουμε το μενού.  */
@media screen and (max-width: 600px) {
  .navigation a:not(:first-child) {display: none;}
  .navigation a.icon {
    float: right;
    display: block;
  }
}

/* Η κλάση .responsive θα προστίθεται στην .navigation  μεσώ της
javascript όταν κάνουμε κλικ στο εικονίδιο. Και το μενου θα εμφανίζεται
κάθετα */
@media screen and (max-width: 600px) {
  .navigation.responsive {position: relative;}
  .navigation.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navigation.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}  

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

script.js


/* Ανοιγοκλείνει το μενού προσθέτοντας η αφαιρώντας την 
css κλάση responsive */
function showMenu() {
  var status = document.getElementById("nav");
  if (status.className === "navigation") {
    status.className += " responsive";
  } else {
    status.className = "navigation";
  }
}  

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις η ιδιότητες που χρησιμοποιήσαμε θα βρείτε στα παρακάτω 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 ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll.

php Tutorials

Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. 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, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων. 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) αν η φωτό είναι έγκυρη.

javascript Tutorials

javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript 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 ενέργεια Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password.

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')