HTML <menu> Tag

Introduction to HTML <menu> Tag

HTML <menu> tag HTML के पुराने versions में included था। लेकिन इसे बाद में HTML version 4.0.1 में exclude कर दिया गया था। अब इस tag को वापस HTML5 में redefine करके include किया गया है।

<menu> tag commands की list define करने के लिए use किया जाता है। उदाहरण के लिए आप web page में कोई image add करते है। आप चाहते है की जब कोई इस image पर right click करे तो default menu display ना हो और आपके द्वारा define की गयी commands की menu display हो तो इसके लिए आप HTML <menu> tag को use कर सकते है।

Commands की list में हर command एक specific task perform करती है। जैसे की जब आप windows operating system में desktop पर right click करते है तो आपको कुछ commands की list show होती है जो अलग अलग tasks perform करती है। उसी प्रकार आप HTML elements के लिए भी commands की list create कर सकते है जो user को right click करने पर show होगी।

<menu> tag के द्वारा context menus, popup menus, toolbars और form controls create किये जा सकते है।

जिस भी HTML element पर आप menu apply करना चाहते है उस element में आप contextmenu attribute define करते है और उसमे <menu> tag की id value के रूप में pass करते है।

HTML <menuitem> Tag

<menu> tag commands की list के लिए एक container का काम करता है। इसके अंदर हर command को <menuitem> द्वारा define किया जाता है। <menuitem> tag के label और icon दो मुख्य attributes होते है।

इनमें label attribute द्वारा command का display name define किया जाता है और icon attribute द्वारा command का icon define किया जाता है। Command का icon define करना अनिवार्य नहीं है। इस tag का general syntax निचे दिया जा रहा है।

<menuitem label="command-name" icon="icon-image-url" event-attribute="action"></menuitem>

किसी command को click करने पर क्या action लिया जाएगा ये आप HTML event attributes द्वारा define करते है। उदाहरण के लिए आप onclick event attribute से define कर सकते है की command को click करने पर क्या action लिया जाएगा।

Syntax of HTML <menu> Tag

HTML <menu> tag का general syntax निचे दिया जा रहा है।

<menu label="" type="" id="">
<menuitem attributes...>
</menuitem>
</menu>

जैसा की आप ऊपर गए syntax में देख सकते है <menuitem> tag <menu> tag के अंदर define किया जाता है। इसे <menu> tag का sub tag भी कहा जा सकता है।

Attributes of HTML <menu> Tag

<menu> tag के साथ available attributes के बारे में निचे बताया जा रहा है। label - इस attribute द्वारा आप menu का एक display नाम define कर सकते है। इसे define करना अनिवार्य नहीं है।

  • type - इस attribute द्वारा आप define करते है की आप किस प्रकार की menu show करना चाहते है। इस attribute की निचे दी गयी 3 possible values हो सकती है।
  • list - जब आप commands की list create करना चाहते है।
    • toolbar - जब आप एक toolbar create करना चाहते है।
    • context - जब आप एक context menu create करना चाहते है।
  • <menu> tag HTML के सभी global और event attributes को भी support करता है।

Example <menu> tag का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>Menu Tag Demo</title>
</head>

<body>
<img src="Best-Hindi-Tutorials-Logo.png" contextmenu="myMenu">

<menu type="context" id="myMenu">
<menuitem label="Reload" onclick="window.location.reload();">
</menuitem>
</menu>

</body>
</html>

ऊपर दिए गए उदाहरण एक image add की गयी है। इस image पर myMenu नाम की context menu apply की गयी है। इस menu में refresh command दी गयी है जो click करने पर image को reload करती है। यह उदाहरण निचे दिया गया output generate करता है।

Related Posts