Μετατροπή μενού σε mobile

[hariC11]

Καλησπέρα παιδιά, φτιάχνω μια ιστοσελίδα, ένα project της σχολής μου και θέλω λίγο την βοήθεια σας!!

Σαν καινούργιος στο κομμάτι αυτό, θέλησα να μην πάρω έτοιμο template, αλλά να κάνω ένα δικό μου...

Όλα καλά, όλα ωραία, τώρα που φτάνω στα Media Queries έχω ένα θέμα με το μενού!
Δεν χρησιμοποιώ breakpoints, και η σελίδα είχε σχεδιαστεί για Desktop και όχι σε Mobile αρχικά!

Σας παραθέτω κομμάτια του κώδικα καθώς και printscreen απο το Blisk, που τον χρησιμοποιώ για να κάνω τα Queries...

**Να σημειώσω ότι δεν μπορώ να χρησιμοποιήσω JQuery!

Σας ευχαριστώ!

 

Στο HTML αρχείο: 

<nav class="scroll-menu">
	<a href="index.html"> <img class="logo" src="media/logo.png" alt="Taste Of Italy"/> </a>
	<div class="menu">	
		<a href="contact.php"> Contact</a>
		<a href="about.html"> About Us </a>
		<a href="reservation.php"> Make a Reservation </a>
		<div class="dropdown">
			<button class="dropbtn" >Menu</button>
			<div class="dropdown-content">
				<a href="menu/salads.html">Salads</a>
				<a href="menu/pasta.html">Pasta</a>
				<a href="menu/pizza.html">Pizza</a>
				<a href="menu/meat.html">Meat</a>
				<a href="menu/soda.html">Wine & Soda</a>
			</div> </div>
		<a href="index.html">Home </a>
	</div>
 </nav>

Το CSS αρχείο για διαμόρφωση του Menu: 

.scroll-menu {
	position:relative;
	z-index: 1;
	width: 100%;
	height: auto;
	bottom:4px;
}

.menu {
	font-family: 'Catamaran', sans-serif;
    background-color: transparent;
	overflow:auto;
}

.menu a {
	float:right;
    color: #626262;
    padding: 13px 10px 0 10px;
	font-size: 1.125em;
    text-decoration: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown  .dropbtn {
	font-family: 'Catamaran', sans-serif;
    font-size: 1.125em;    
    border: none;
    color: #626262;
    padding: 13px 10px 0 10px;
    background-color: transparent;
}

.menu a:hover, .dropdown:hover .dropbtn {
	color:#626262;
	background-color: rgba(0,0,0,0.7);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
	font-family: 'Catamaran', sans-serif;
	font-size: 1em;
	float: none;
	display: block;
    color: #626262;
    padding: 12px 16px;
    text-decoration: none;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #222222;
	color: #b5b5b5;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Το δεύτερο CSS αρχείο με τα Queries (Αν έχετε την καλοσύνη ελέγξτε τα όλα) : 

/* Laptops & Desktops */

/* Laptops (Medium and Small) & Desktops */
@media only screen and (min-width : 1224px) {
	ul.footer{ margin-left: 0%; margin-right: 0%;}
	nav.footer { margin-top: 25%;}
	.bigtext{ margin-top: 20%;}
}
 
/*  Megales Othones Desktop */
@media only screen and (min-width : 1439px) {
	nav.footer { margin-top: 30%;}
	.bigtext{  margin-top: 20%;}
}

/*  Megales Othones Desktop - FHD*/
@media only screen and (min-width : 1919px) {
	ul.footer{ margin-left: 2.5%; margin-right: 2.5%;}
	nav.footer { margin-top: 15%;}
	.bigtext{font-size: 6.8em; max-width: 1500px; margin-top: 20%;}
}

/*  Megales Othones Desktop - 2K*/
@media only screen and (min-width : 2559px) {
	nav.footer { margin-top: 25%;}
	.bigtext{font-size: 9em; max-width: 2000px; margin-top: 20%;}
	li.head{font-size: 1.7em;}
	li.text{font-size: 1.5em;}
}

/* Tablets & iPad */

/*  All iPads, include iPad Mini (Retina & Non-Retina) */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body{ background-image: url("../media/background_devices.jpg");}
	.logo{width: 155px; margin : 5px 0 0 13%;}
	.menu a {	font-size: 0.85em;  }
	.dropdown  .dropbtn {font-size: 0.85em;}
	.dropdown-content a {	font-size: 0.85em; }
	ul.footer{ margin-left: 0%;}
	.bigtext{font-size: 3.7em; max-width: 800px; margin-top: 45%; margin-bottom: 62%}
	#footer2{ font-size: 1em;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.logo{width: 155px; margin : 5px 0 0 13%;}
	.bigtext{ font-size: 4.5em; max-width: 1000px; margin-top: 23.5%; margin-bottom: 32%}
	ul.footer{ margin-left: 0%; margin-right: 0%;}
	#footer2{ font-size: 1em;}
}

/* Google Nexus 7 - Asus Nexus 7 and Other 7 */

@media only screen and (min-device-width : 600px) and (max-device-width : 960px) and (orientation : portrait) {
	body{ background-image: url("../media/background_devices.jpg");}
	.logo{width: 110px; margin : 5px 0 0 13%;}
	.menu a {	font-size: 0.7em;  }
	.dropdown  .dropbtn {font-size: 0.7em;}
	.dropdown-content a {	font-size: 0.65em; }
	#DeviceFixLocation{ margin-right: 8%;}
	#DeviceFixContact{ margin-left: 0%;}
	#DeviceFixSocial{ margin-right: 11%;}
	.bigtext{font-size: 3.55em; max-width: 850px; margin-top: 55%; margin-bottom: 70%}
	#footer2{ font-size: 1em;}
	li.head{font-size: 1.4em;}	
	li.text{font-size: 0.9em;}
}

@media only screen and (min-device-width : 600px) and (max-device-width : 960px) and (orientation : landscape) {
	.logo{width: 165px; margin : 5px 0 0 13%;}
	.bigtext{ font-size: 4.5em; max-width: 1000px; margin-top: 20%; margin-bottom: 30%}
	ul.footer{ margin-left: 0%; margin-right: 0%;}
	li.head{font-size: 1.4em;}	
	li.text{font-size: 0.9em;}
}


/* SmartPhones */

/* Most SmartPhones and iPhones 2G-4S + iPod 1Gen-4Gen */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
	body{ background-image: url("../media/background_devices.jpg");}
	
	
	.bigtext{ font-size: 2em; max-width: 400px; margin-top: 35%; margin-bottom: 60%}
	ul.footer{ margin-left: 0%; margin-right:0%;}
	li.head{font-size: 0.9em;}	
	li.text{font-size: 0.6em;}
	#footer2{ font-size: 0.85em;}
	
	
	.scroll-menu {	 position:relative;	z-index: 1;	width: 100%;	height: auto;	bottom:4px; }
	.menu {	overflow:auto;	}
	.menu a {	float:left ; }
	.dropdown {    float: left; }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* STYLES GO HERE */}

[Ruhl]

Νομιζω αυτα θα σε βοηθησουν για σκετη css
http://bacsoftwareconsulting.com/blog/wp-content/uploads/2015/01/menu-demo/

http://bacsoftwareconsulting.com/blog/index.php/web-development/how-to-create-a-responsive-menu-without-jquery/

 

[dominotrix]

To menu λογικα θα θελεις να κρυβεται ετσι δεν ειναι; Αναφερομαι σε εμφανιση 600px και κατω, κυριως για κινητα.

 

Μπες στο codepen.io και κανε μια αναζητηση για hamburger menu, mobile menu, responsive menu, κλπ. Μιας και εισαι αρχαριος, θα σε βοηθησει να δεις κωδικα και να μαθεις να τον εφαρμοζεις στο δικο σου project.

[hariC11]

Σας ευχαριστώ, βρήκα παράδειγμα και θα το ενσωματώσω!! Ευχαριστώ!!

[dominotrix]

 κρατα το codepen στα αγαπημενα, μπαινε μια στο τοσο να σκαλιζεις, μαθαινεις αρκετα. και αναλογως τι γνωσεις εχεις δες και το codeacademy