Drop down με 2 Columns

[varemarious]

Καλησπέρα έχω δημιουργήσει ένα drop down menu με HTML & CSS το οποίο δουλεύει κανονικά χωρίς πρόβλημα..

 

Η μια κατηγορία τώρα έχει 10 υποκατηγορίες οι οποίες επειδή είναι πολλές, δε φαίνεται ωραίο οπτικά..

 

θέλω να κάνω λοιπόν αυτές τις υποκατηγορίες να εμφανίζονται σε 2 στήλες 5 και 5.. γνωρίζει κάποιος πως μπορώ να το κάνω αυτό ;

 

ευχαριστώ

[TheELF]

Εκτός και αν θες να ακούσεις λύσεις του τύπου: «Κάνε ο,τι έκανες για την μία στήλη αλλά μοίρασε το σε δύο.»

Δώσε μας των κώδικα που χρησιμοποίησες ή την διεύθυνση της σελίδας.

[thanasis00]

αν ο τρόπος εμφάνισης της drop down λίστας είναι με visibility ενός div, τότε απλά μέσα στο div φτιάχνεις έναν πίνακα για τις υποκατηγορίες σου. Βέβαια, όπως λέει και ο φίλος TheELF, χωρίς τον αρχικό κώδικα, κάνουμε απλά εικασίες...

[varemarious]

το μενού είναι φτιαγμένο με li όπου κρύβω το υπομενού και εμφανίσω στο hover ...

 

δεν θέλω να το κάνετε εσείς για εμένα, απλά να μου προτείνετε έναν τρόπο πως μπορεί να υλοποιηθεί ή κάποιο tutorial για να κατευθυνθώ να το ψάξω και να το φτιάξω ..

 

ευχαριστώ

[chrism4111]

Αν εδινες στο πεμπτο στοιχιο της υπολίστας ενα css inline atribute οπως το παρακατω <li style="float:left;">SubCategory 5</li>

θα πετυχενες κάτι; Δοκιμασε το και πες μας... Χωρις να μας δωσεις κωδικα βέβαια θα συμφωνησω με τα παιδια παραπανω απλες εικασίες κανουμε...

[NiKoS WSN]

Μπορεί να μην θέλει να δώσει τον κώδικα γιατί περιέχει στοιχεία. Αν είναι βγάλε ότι δεν θες να δούμε και πόσταρε το!

[defacer]

Αν κατάλαβα, αυτό που θέλεις να κάνεις είναι το εξής (αγνοώ το υπόλοιπο μενού και πιάνω μόνο το μέρος που έχει την υπολίστα με τα 10 items):

 

* Αν είναι μέχρι π.χ. 5 πράγματα, να φαίνονται έτσι:

 

>1
2
3
4
5

 

* Αν είναι π.χ. 10, να φαίνονται έτσι:

 

>1   6
2   7
3   8
4   9
5   10

 

Αν αυτό είναι που θέλεις, δυστυχώς δεν γίνεται μόνο με CSS και θα πρέπει να "βοηθήσεις" είτε 1) δημιουργώντας την HTML έχοντας λάβει υπόψη των αριθμό των items, είτε 2) να αλλάξεις το DOM εκ των υστέρων με jQuery, είτε 3) να βρεις άλλο τρόπο να εμφανίζεις αυτά που θέλεις.

 

Η λύση με το table που ανέφερε κάποιος φίλος παραπάνω (η οποία δε μου αρέσει αλλά έχει πρακτικά πλεονεκτήματα) είναι στην κατηγορία 1 γιατί θα πρέπει να φτιάξεις το table structure ανάλογα με το πόσα στοιχεία έχεις.

 

Μια παρόμοια λύση η οποία μπορεί να υλοποιηθεί μόνο με CSS είναι το να έχεις πάντα 2 (ή Ν) στήλες, δηλαδή π.χ. αν έχεις 3 items να εμφανίζονται ως εξής:

 

>1   2
3

 

Αυτό όμως είναι μάλλον άσχημο οπτικά και δε νομίζω να σου αρέσει. Αν θέλεις να το δοκιμάσεις, η ιδέα είναι κάτι σαν κι' αυτό εδώ. Εκτός από το ότι δεν είναι τόσο ωραίο, ένα άλλο "μειονέκτημα" που έχει είναι ότι θα πρέπει να επιλέξεις το πλάτος των στηλών από πριν (ενώ αν γίνουν με table τότε θα το κάνει ο browser δυναμικά). Το "μειονέκτημα" το βάζω σε εισαγωγικά γιατί οποιοσδήποτε designer που αξίζει αυτόν τον τίτλο θα σου πει ότι το να μην έχεις επιλέξει το πλάτος των στηλών από πριν είναι αποτέλεσμα άγνοιας.

[varemarious]

Αν κατάλαβα, αυτό που θέλεις να κάνεις είναι το εξής (αγνοώ το υπόλοιπο μενού και πιάνω μόνο το μέρος που έχει την υπολίστα με τα 10 items):

 

* Αν είναι μέχρι π.χ. 5 πράγματα, να φαίνονται έτσι:

 

>1
2
3
4
5

 

* Αν είναι π.χ. 10, να φαίνονται έτσι:

 

>1   6
2   7
3   8
4   9
5   10

 

Αν αυτό είναι που θέλεις, δυστυχώς δεν γίνεται μόνο με CSS και θα πρέπει να "βοηθήσεις" είτε 1) δημιουργώντας την HTML έχοντας λάβει υπόψη των αριθμό των items, είτε 2) να αλλάξεις το DOM εκ των υστέρων με jQuery, είτε 3) να βρεις άλλο τρόπο να εμφανίζεις αυτά που θέλεις.

 

Η λύση με το table που ανέφερε κάποιος φίλος παραπάνω (η οποία δε μου αρέσει αλλά έχει πρακτικά πλεονεκτήματα) είναι στην κατηγορία 1 γιατί θα πρέπει να φτιάξεις το table structure ανάλογα με το πόσα στοιχεία έχεις.

 

Μια παρόμοια λύση η οποία μπορεί να υλοποιηθεί μόνο με CSS είναι το να έχεις πάντα 2 (ή Ν) στήλες, δηλαδή π.χ. αν έχεις 3 items να εμφανίζονται ως εξής:

 

>1   2
3

 

Αυτό όμως είναι μάλλον άσχημο οπτικά και δε νομίζω να σου αρέσει. Αν θέλεις να το δοκιμάσεις, η ιδέα είναι κάτι σαν κι' αυτό εδώ. Εκτός από το ότι δεν είναι τόσο ωραίο, ένα άλλο "μειονέκτημα" που έχει είναι ότι θα πρέπει να επιλέξεις το πλάτος των στηλών από πριν (ενώ αν γίνουν με table τότε θα το κάνει ο browser δυναμικά). Το "μειονέκτημα" το βάζω σε εισαγωγικά γιατί οποιοσδήποτε designer που αξίζει αυτόν τον τίτλο θα σου πει ότι το να μην έχεις επιλέξει το πλάτος των στηλών από πριν είναι αποτέλεσμα άγνοιας.

 

από το ψάξιμο που έχω ρίξει το ποιό σωστό είναι μάλλον να αλλαχτεί με jquery..

με tables δεν το προσπαθώ καν δεν είναι σωστή τακτική για εμένα..

το τελευταίο με css που έγραψες θα το δοκιμάσω και εννοείτε ότι έχω δώσει πλάτος σε όλα τα στοιχεία της στήλης..

 

πάντως θα με ενδιέφερε αν έχεις ένα παράδειγμα με jquery

[spartakoscs]

Για δες εδώ !! έγραψα κάτι δεν ξέρω εάν είναι αυτό που ζητάς !!

 

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#warpper{
background-color: green;
width: 300px;
}
li{
float: left;
margin-left: 30px;
 	width:100px;
}
.clr{
clear: both;
}
</style>
<script type="text/javascript" src="#"></script>
</head>

<body>
<div id="warpper">
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
	<li>21</li>
	<li>22</li>
	<li>23</li>
	<li>24</li>
	<li>25</li>
	<li>26</li>
	<li>27</li>
	<li>28</li>
	<li>29</li>
	<li>20</li>
</ul>
<div class="clr"></div>
</div>
</body>
</html>

 

 

Επίσης δες τα παρακάτω link !!

 

http://www.alistapart.com/articles/multicolumnlists/

 

http://codeasily.com/jquery/multi-column-list-with-jquery

 

Επιλέγεις τι σου κάνει !!