Πως θα φτιάξω δικό μου μενού στο δεξί click

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
31/01/2013 από
infogeek

Είναι ένα πολύ-συζητημένο θέμα, κυρίως για όσους θέλουμε ο χειρισμός του site να είναι γρήγορος και ευχάριστος. Όπως αυτός της google.

Και παράλληλα να διατηρούμε καθαρό το site ώστε ο χρήστης να εστιάζει στο περιεχόμενο και όχι να προσπαθεί να βρει το σωστό κουμπί στην πλοήγηση.

Παλιότερα, η δημιουργία ενός μενού “αντικαταστάτη” στο δεξί κλικ, ήταν υπόθεση καθαρά javascript. Δημιουργούσες το αντικείμενο:

Γράφαμε την css, με δύο επιπλέον κλάσεις, hide και show:

#context

            {

                background: #fefefe;

                border: 1px solid #888;

                width: 200px;

                position: absolute;

                font-family: Arial,sans-serif;

            }

            #context ul {list-style:  none;}

            #context li { margin: 0; padding: 0;}

            #context a

            {

                color: #000;

            text-decoration: none;

            }

            .hideContext { display: none; }

            .showContext { display: block;}

Και τέλος το javascript, το οποίο περνάει δύο event στο παράθυρο, όπου το πρώτο, παίρνει την θέση του ποντικιού, εμποδίζει την εμφάνιση του κανονικού μενού, και στο τέλος εμφανίζει το δικό μας μενού και θέτει τις διαστάσεις από την θέση του ποντικιού.
Ενώ το δεύτερο, απλά αλλάζει την κλάση σε hide, ώστε να κρύψει το μενού που δεν χρειαζόμαστε.

 window.addEventListener('contextmenu', function(e)

        {

           var x= e.clientX,

            y = e.clientY;

            e.preventDefault();

            context.setAttribute('class', 'showContext');

            context.setAttribute('style','left: '+x+'px;'+' top: '+y+'px;');

        });

        window.addEventListener('click', function(e)

        {

            context.setAttribute('class', 'hideContext');

        });

Τώρα όμως ήρθε η HTML5…

Πλέον χρησιμοποιούμε απλά markup για το ίδιο αποτέλεσμα και μάλιστα με αρκετά ευέλικτο στυλ. Το πρόβλημα είναι ότι η προδιαγραφή υποστηρίζεται ακόμα μόνο από τον Mozilla… Οπότε, υπομονή!

Σε αυτή την περίπτωση θυμόμαστε το νεο type=context για το μενού. Ότι χρειαζόμαστε id για να το ορίσουμε να ακούει από κάπου. Και την σύνταξη που περιγράφω από κάτω. Σας ενθαρρύνω απλά να αντιγράψετε την html και να καθίσετε να κάνετε αλλαγές στον κώδικα για να δείτε τι μπορείτε να κάνετε.

 <html>
	<head>
		<title>Context Menu</title>
		<style>
			section { height: 300px; width: 300px; border: 1px solid; border-radius: 3px;}
		</style>
		<menu type="context" id="custom" label="Custom Menu" >
			<menuitem label="Refresh" onclick="window.location.reload()" ></menuitem>
			<menu label="Go Social" >
				<menuitem label="Facebook" onclick="window.location.href='http://www.facebook.com'" ></menuitem>
			</menu>
		</menu>
	</head>
	<body >
		<section contextmenu="custom">
			Hello context menu!
		</section>
	</body>
</html>







Hide ↑

Το αντικείμενο των σπουδών μου είναι η Μηχανολογία! Ασχολούμαι με τον προγραμματισμός σχεδόν από τα 14. Η πρώτες μου γλώσσες ήταν η QBasic και η Turbo Pascal. Από τα 16 και έπειτα έμαθα να δουλεύω με Visual Basic. Και με την έναρξη της φοιτητικής ζωής, ξεκίνησε η δουλειά πάνω σε C#, Java, php και javascript scripting και όλο το πακέτο του web development. Εκτός από το κερδοσκοπικό κομμάτι της δουλειάς μου ως developer . Δουλεύω πάνω σε opensource εφαρμογές και παραδείγματα κώδικα για την ενίσχυση της κοινότητας του ελληνικού development. Για περισσότερα, επισκεφτείτε το infogeek.gr!

Follow Κωνσταντίνος Τσατσαρούνος on Twitter ,

Προσθέτοντας θέματα στο MP6

21 September 2013

Όσοι δεν ξέρετε το MP6, είναι ένα plugin που αλλάζει την εμφάνιση του wordpress backend, ή αλλιώς τις σελίδες διαχείρισης περιεχομένου του! Δίνει μία πολύ[…]

Read more...

Git ή SVN, επιλογή version control

09 September 2013

Είμαι πολύ καιρό χρήστης του SVN και δεν το μετανιώνω! Ωστόσο το subversion control, είναι καλό στον έλεγχο τον αλλαγών ενός project που ξέρεις από που ξεκινάει[…]

Read more...

Κεντράροντας δυναμικά html elements μόνο με CSS!

08 June 2013

Ένα πράγμα που πρέπει να αναλογιστεί κανείς, είναι πόσες ώρες σπαταλάμε την ημέρα για να πετύχουμε ομαλή και responsive συμπεριφορά σε ότι σχεδιάζουμε.[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.