Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
peterpap
Δημοσιεύσεις: 3
Εγγραφή: 25 Ιούλ 2014 19:23

Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Δημοσίευση από peterpap » 25 Ιούλ 2014 19:38

Καλησπέρα ξέρω ότι αυτό που θα ρωτήσω είναι γενικό όμως με τρώει η απορία όσο δεν φαντάζεστε να μάθω. Έψαξα όσο μπορώ στο freestuff.gr για κάποιο tutorial πάνω στο πως μπορούμε να φτιάξουμε ένα απλό responsive laypout με ένα απλό μενού επίσης όμως δεν βρήκα κάτι δεν έχω ψάξει σωστά ή δεν έχετε κάτι σχετικό σε βοήθημα ;

Αποφάσισα να ρωτήσω λοιπόν αφού στα αγγλικά ψάχνοντας έχω μπερδευτεί. Ποιος ο καλύτερος τρόπος να αρχίσω ; Γιατι αλλιώς σε βάζει στο νόημα το ένα tutorial και αλλιώς το άλλο.. μπέρδεμα ! Επίσης πολλά tutorial στα αγγλικά κάνουν χρήση διάφορων frameworks τόσο σε css όσο και σε javascript τα οποία δεν κατέχω και κάνουν την προσπάθεια μου να καταλάβω ακόμα πιο δύσκολη.

Μπορείτε να μου δείξετε εδώ ένα απλό layout responsive με ένα απλό μενού responsive επίσης εξηγώντας το και λίγο ώστε να καταλάβω πως σκεφτόμαστε ;

Δεν χρειάζομαι κάτι περίπλοκο απλά να μπώ στη λογική του πως σκεφτόμαστε για να ξεκινήσουμε ένα απλό responsive layout με menu !

peterpap
Δημοσιεύσεις: 3
Εγγραφή: 25 Ιούλ 2014 19:23

Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Δημοσίευση από peterpap » 25 Ιούλ 2014 21:08

Οκ ας το κάνω πιο συγκεκριμένο, παραθέτω κάτω ένα από τα απλά που κατάφερα να φτιάξω το οποίο περιέχει και μενού :

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<div>
		<ul class="navigation" role="navigation">
			<li><a href="#">Αρχική</a></li>
			<li><a href="#">Κατηγορία 2</a></li>
			<li><a href="#">Κατηγορία 3</a></li>
			<li><a href="#">Κατηγορία 4</a></li>
			<li><a href="#">Κατηγορία 5</a></li>
		</ul>
	</div>
	<div>	
		<section>
			<h1>ΕΝΑ</h1>
			<p>Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και.</p>
			<h2>ΔΥΟ</h3>
			<ul>
			<li><strong>Το</strong>-Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον.</li>
      <li><strong>Το Lorem Ipsum είναι το επαγγελματικό πρότυπο</strong> Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε</li>
			</ul>
			<h3>ΤΡΙΑ</h3>
			<ul>
			<li><strong>Το Lorem Ipsum</strong>- <a href="#">Lorem Ipsum</a> είναι <a href="#">Κείμενο</a> χωρίς νόημα και μάλιστα είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και</li>
			</ul>
		</section>
		<footer >   
			<div>
				<nav>
					<a href="#">Δοκιμαστικό</a>
				</nav>
			</div>
		</footer>
	</div>
 </body>
</html>
Επίσης και το css του,

Κώδικας: Επιλογή όλων

.navigation li a &#123;
  		display&#58; block;
			border-bottom&#58; 1px solid #000;
			padding&#58; 1em;
		&#125;
		
		@media all and &#40;min-width&#58; 45em&#41; &#123;
			.navigation li &#123;
				display&#58; inline-block;
				margin&#58; 0 0.5em;
			&#125;
			.navigation li a &#123;
				padding&#58; 1em 0.5em;
				border&#58; 0;
			&#125;
		&#125;
Οπότε με βάση το παραπάνω πείτε μου το κάνω σωστά, είναι όπως πρέπει ένα σωστό responsive layout με menu ή όχι ;

Μερικές πρώτες απορίες ερωτήσεις,

Α- Πως μπορώ να κεντράρω σωστά όλο το παραπάνω δίχως να χαλάσω την responsive λειτουργικότητα του ;

Β - Πως μπορώ να κεντράρω το μενού σωστά ορίζοντας το class στο div που περιέχει το μενού π.χ class="kentro", έτσι ώστε το μενού να μην είναι αριστερά στο πλαί όπως είναι τώρα αλλά να βρίσκεται στο κέντρο ; Xωρίς να χαλάσει η responsive λειτουργικότητα επίσης.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Δημοσίευση από nbc » 25 Ιούλ 2014 22:26

Καταλαβαίνω τον πόνο σου, αλλά αυτό που ζητάς είναι ο 13ος άθλος του Ηρακλή!

Ζητάς, στα πλαίσια ενός φόρουμ ποστ, να αναλυθεί κάτι για το οποίο έχουν γραφεί:

- 18.500.000 σελίδες,
- 10άδες βιβλία
- grid frameworks, css pre-processors, javascript libraries, κλπ εργαλεία

... και το ζητάς καλοκαιριάτικα :)


Σχετικά με τις ερωτήσεις σου:

Α) Δεν έχει αλλάξει τίποτα, όσον αφορά το κεντράρισμα. Δεξί-αριστερό margin στο auto. Κάτι, φυσικά, που προϋποθέτει width. Απλά, στο RD χρησιμοποιούμε max-width.

Β) Κι εδώ δεν έχει αλλάξει τίποτα. Ανάλογα με την κατασκευή του menu, ή margin auto (floated items) ή text-align center (inline items).


Πάντως, και αν μου επιτρέπεις, κακώς εστιάζεις στο (κεντρικό) μενού. Είναι μεν βασικό δομικό στοιχείο αλλά από μόνο του δεν φέρνει την Άνοιξη. Δεν καθαρίζεις με αυτό και μόνο.

Όπως (σωστά) το έχεις, η βασική ιδέα είναι ότι τα οριζόντια μετατρέπονται σε κάθετα. Τα popups και flyouts γίνονται accordion ή swapped. Hover δεν υπάρχει.


Αν θες να ξεκινήσεις από κάπου, ξεκίνα από τη φιλοσοφία των grids. Είναι η βάση για το RD. Ένα καλό εισαγωγικό άρθρο είναι αυτό. Λίγο παλιό, αλλά νομίζω θα σε βάλει στο κλίμα.

Αν αποφασίσεις ότι δεν αξίζει να ανακαλύψεις τον τροχό, θα πρέπει να επιλέξεις μεταξύ του Bootstrap και του Foundation. To 2o είναι αρτιότερο τεχνικά και φιλοσοφικά, αλλά το πρώτο έχει τεράστια κοινότητα. Το 99% των responsive themes είναι σε Bootstrap. Μια ματιά στο themeforest θα σε πείσει.

peterpap
Δημοσιεύσεις: 3
Εγγραφή: 25 Ιούλ 2014 19:23

Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Δημοσίευση από peterpap » 25 Ιούλ 2014 23:21

Το περίμενα :)

Μα γιαυτό ξαναπόσταρα και παρέθεσα κώδικα με βάση τον κώδικα θα ήθελα απαντήσεις στις ερωτήσεις ώστε να μην είναι αόριστο ή άθλος του Ηρακλέους.

Ωραίο το άρθρο για τα grids τα είδα να τα χρησιμοποιούν και να τα αναφέρουν στα διάφορα tutorials αλλά είμαι άσχετος με τα grids το ομολογώ ! Θα το παλέψω όμως.

Για το bootstrap επειδή δεν είχα ιδέα από grids δεν του έδωσα προσοχή αφού μου φάνηκε βουνό :(

Προτιμώ πάντως ώστε να καταλάβαίνω και τι κάνω να μην πάω τώρα σε έτοιμα grids και frameworks για την ώρα θα ήθελα να καταλάβω τη λογική του responsive γιαυτό έδωσα και τον κώδικα πιο πάνω.

Θα δω πως μπορώ να το κεντράρω και ότι καταφέρω θα το ξαναποστάρω εδώ, εν οτ μεταξύ όποιος θέλει να βοηθήσει με λίγο κώδικα γιατί είμαι περισσότερο της πράξης παρά της θεωρίας θα ήταν καλοδεχόμενος !!!

Άβαταρ μέλους
neundex
Δημοσιεύσεις: 40
Εγγραφή: 19 Σεπ 2013 09:49
Επικοινωνία:

Πως φτιάχνουμε ένα απλό responsive layout με responsive menu ;

Δημοσίευση από neundex » 28 Ιούλ 2014 21:12

όπως είπε και ο μάστορας του RWD, τα συστατικά είναι 3:

1. Flexible Grid
2. Flexible images & media
3. Media Queries

Απο εκεί και πέρα όσον αφορά το layout ίσχυουν όσα είπε ο nbc, προσθέτω κι ενα link που ίσως σου φανεί χρήσιμo:

Responsive Patterns


Εκεί θα βρείς διάφορα patterns πάνω σε όλα τα σχετικά θέματα και συγκεκριμένα όσον αφορά το menu, η πιο δημοφιλής λύση (μέχρι στιγμής) είναι αυτή: Toggle


Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες