Πώς να δημιουργήσετε ένα μενού DHTML;

ψήφοι
0

Θα πρέπει να δημιουργήσετε ένα μενού DHTML με τα συγκεκριμένα χαρακτηριστικά, αλλά δεν μπορώ να καταλάβω πώς να το κάνουμε. Εδώ είναι ό, τι χρειάζεστε:

Όλα τα στοιχεία που είχαν απολυθεί έξω οριζόντια. Αν θα είναι ευρύτερη από την οθόνη, δύο μικρά βέλη εμφανίζονται στη δεξιά πλευρά του μενού που σας επιτρέπουν να μετακινηθείτε. Κάτι σαν αυτό:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Τα στοιχεία μενού θα πρέπει να κάνετε κλικ οπουδήποτε μέσα στο κύτταρο. Θα πρέπει να τεντώσει τόσο κάθετα όσο και οριζόντια στο περιεχόμενο. Το κείμενο τα στοιχεία θα πρέπει να επικεντρώνεται τόσο κάθετα όσο και οριζόντια. Το μενού θα πρέπει να εργαστούν σε IE7 / Όπερα / FF / Safari.

Η κύλιση είναι το εύκολο μέρος - Απλά όλα τοποθετήσετε σε ένα δοχείο (ας πούμε, ένα <div>), που το δοχείο με overflow: hiddenκαι στη συνέχεια να παίξει γύρω στα Javascript με clientWidth, scrollWidthκαι scrollLeft. Αυτό που έχω καταλάβει και έχουν ήδη δοκιμάσει.

Αλλά πώς να κάνουν τα στοιχεία του μενού τόσο ελαστικό, μπορείτε να κάνετε κλικ οπουδήποτε και με επίκεντρο το κείμενο;

Δημοσιεύθηκε 09/12/2008 στις 15:11
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
2

Δοκιμάστε την παρακάτω CSS:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

Και στη συνέχεια διαμορφώστε το μενού σας, όπως:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

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

Απαντήθηκε 09/12/2008 στις 15:18
πηγή χρήστη

ψήφοι
1

Εντάξει, έχω μιλήσει με τους ανωτέρους μου και αποφάσισαν ότι θα μπορούσε να είναι ΟΚ ότι δεν μπορείτε να κάνετε δεξί κλικ σε ένα στοιχείο μενού και επιλέξτε «Άνοιγμα σε νέο παράθυρο». Εάν η απαίτηση αυτή πέσει, τότε δεν είμαι υποχρεωμένη να <a>στοιχεία για τις συνδέσεις. Με την Javascript μπορώ να μετατρέψει τα πάντα σε ένα σύνδεσμο. Έτσι, θα μπορείτε να επιλέξετε, pikachoo <table> !

Yap, είναι μια αίρεση, αλλά λειτουργεί. Πιο συγκεκριμένα, είναι η μόνη δομή που μπορώ να σκεφτώ ότι μπορεί να κάνει όλα τα ακόλουθα ταυτόχρονα:

  • Κέντρο κείμενο οριζόντια και κάθετα?
  • Τεντώστε στα περιεχόμενα οριζόντια και κάθετα?
  • Δεν τυλίξτε στην επόμενη γραμμή, όταν τα στοιχεία αρχίζουν να υπερχείλισης.

Οτιδήποτε άλλο που μπορεί να κάνει το ίδιο μάλλον θα είναι πιο convulted ούτως ή άλλως. Και πριν κάποιος έχει την ιδέα - όχι, δεν χρειάζεται υποστήριξη των μηχανών αναζήτησης. Είναι μια εσωτερική εφαρμογή web. Θα ήταν πολύ κακό αν η Google θα μπορούσε δείκτης που ...

Απαντήθηκε 09/12/2008 στις 16:12
πηγή χρήστη

ψήφοι
-2

κλικ οπουδήποτε είναι εύκολο: μπορείτε είτε να δεσμεύουν τη σκανδάλη συμβάν onclick (και ελπίζω κάποια δρομέα styling) στο στοιχείο ατομικό κελί, ή μπορείτε να κάνετε τις ετικέτες των κυττάρων στοιχεία <a> ατομική (ή πιο πιθανό τυλίξτε αυτά σε <li>) και σύνδεσμο και το ύφος κατάλληλα (padding, περιθώριο, foo).

π.χ. την περίπτωση 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(Προφανώς εγώ δεν πραγματικά να προτείνω το στυλ ή το σενάριο χειριστές inline αλλά παίρνετε την ιδέα)

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

Απαντήθηκε 09/12/2008 στις 15:21
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more