HTML और CSS से Simple Menu Design कैसे बनायें

किसी भी website के लिए उसका navigation menu बहुत ही important होता है यह website की readability को बढ़ता है और contents को categorize करने में मदद करता है जिससे user को उस website में उपलब्ध information को ढूढने में आसानी होती है|

 

 

आज हम इस article में website के लिए HTML और CSS से simple menu bar step-by-step तरीके से बनाना सीखेंगे जिसमे horizontal और vertical दोनों तरह के navigation design होंगे|

इस प्रकार के navigation को design करना बहुत ही आसान होता है इसके लिए हमे किसी प्रकार के jQuery या Javascript की जरूरत नही पड़ती हम केवल HTML और CSS की मदद से एक simple navigation menu design बना सकते हैं, इसके लिए आपको basic HTML और CSS की जानकारी होनी चाहिए|

 

पढ़ें:-  CSS से Tableless Layout कैसे Design करें

Simple Vertical Navigation Menu कैसे बनाये

Vertical menu bar में कई सारे links की एक  vertical list होती है जिसमे हर एक link किसी button की तरह दिखाई देती है इस प्रकार की menu को आप website के sidebar में लगा सकते हैं|

Vertical navigation menu बनाने के लिए नीचे दिए गये steps को follow करें|

Step 1 : Menu के लिए HTML Structure

जैसा की हमने ऊपर पढ़ा की एक navigation bar में list of links होते हैं इसलिए हम एक HTML लिस्ट बनाते हैं इसके लिए <ul> यानि un-ordered list create करेंगे जिसमे हमें जितने links add करने होंगे उतने <li> element का उपयोग करेंगे और उसके अंदर <a> tag से link बनायेंगे |

सबसे पहले आप कोई भी code editor open कर लें और उसमे नीचे दिए code को लिखना शुरू करें|

<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>

हम यहाँ पर nav element का use कर रहें हैं जो की HTML5 में introduce हुआ है जो की website की primary navigation को represent करती है इसके अलावा nav tag से developer, browser तथा search engine को यह समझने में आसानी होती है की यह वेबसाइट की main navigation है| Browser में यह कुछ इस प्रकार से दिखाई देगा:

 

Step 2 : Navigation की background color और width change करना

हम अपने navigation menu को और आकर्षक बनाने के लिए इसकी background में कुछ कलर add करेंगे इसके लिए हम nav element को selector लेकर उसमे CSS की background property apply करेंगे | इसका code नीचे दिया गया है|

nav { background: #ccc; width: 200px; }

यह browser में कुछ इस तरह display होगा:

 

 

Step 3 : Browser की Default Settings को  Remove करना

जब भी हम <ul> element use करते हैं तो by default browser में इसके लिए कुछ margin और padding set हो जाते हैं इसके अलावा list में bullets पहले से सेट हो जाते हैं, किसी menu bar में इन चीजों की जरूरत नही पड़ती इसलिए हम इन settings को  CSS codes के माध्यम से हटा देते हैं|

nav ul { list-style-type: none; padding: 0; margin: 0; }

List items में से bullets को हटाने के लिए हमने list-style-type: none लिखा  margin और padding को remove करने के लिए इनकी value zero (0) कर दिया |

 

Step 4 :  <a> element की styling करना

अब हम <a> element की style को change करेंगे, text में color add करेंगे, alignment को center करना है, और हमें text में underline की जरूरत नहीं इसलिए इसे हटा देंगे |

nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; }

 

चलिए अब इस कोड को समझते हैं:

display: block - अभी तक हमारा link सिर्फ text के ऊपर click करने पर काम करता था लेकिन <a> को display: block  करने पर link एक block element बन जायेगा और उसका पूरा area clickable बन जायेगा |

color: #000 - text की color को black करने के लिए hex code #000 use किया|

padding: 15px - links के बीच space लाने के लिए 15px की padding add किया|

text-decoration: none - इससे text के underline को remove किया गया|

text-align: center - अब तक text left side में दिखाई दे रही थी लेकिन अब center में display होगी |

इस code को apply करने के बाद menu की design कुछ इस तरह दिखाई देगी:

 

Step 5 : Hover effect add करना

आपने देखा होगा ज्यादातर website के menu के button के ऊपर जब हम hover करते हैं यानि mouse pointer ले जाते हैं तब उसका background color change हो जाता है, हम भी कुछ ऐसा ही effect add करने वाले हैं इसके लिए नीचे दिए गये CSS code का उपयोग करेंगे |

nav ul li a:hover { background-color: #2c4584; color: #fff; }

 

जब हम menu के किसी भी link पर mouse ले जायेंगे तो उसका background color बदल कर #2c4584 (blue) हो जायेगा और text की color #fff (white) हो जायेगी | यह browser में कुछ इस प्रकार से दिखाई देगी:

Step 6 : Navigation में Border set करना

अगर आप मेनू में border add करना चाहते हैं तो इसके लिए हम नीचे दिए कोड का उपयोग करेंगे|

nav ul { border: 1px solid #999; } nav ul li { border-bottom: 1px solid #999; } nav ul li:last-child { border-bottom: none; }

nav ul - हमने menu के चारों तरफ 1px का border add किया जिसका color #999 है |

nav ul li - हर एक list item के bottom में border सेट किया |

nav ul li:last-child - last वाले item के bottom में पहले से ही border जो की ul पर सेट किया गया है इसलिए last li का border-bottom: none कर देते हैं |

 

 

Complete HTML and CSS Code For Vertical Navigation Menu Design

ऊपर हमने एक-एक  step में आपको समझाया की कौन सा code किस काम के लिए हम उपयोग कर रहे हैं  इन steps को follow कर आप एक vertical menu का design बना सकते हैं |

अब हम इसका पूरा code आपको दे रहें हैं ताकि आपको इसे समझने में आसानी हो|

HTML Code

<html> <head> <title>Simple Menu Design</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </body> </html>

CSS Code

nav { background: #ccc; width: 200px; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; } nav ul li a:hover { background-color: #2c4584; color: #fff; } nav ul { border: 1px solid #999; } nav ul li { border-bottom: 1px solid #999; } nav ul li:last-child { border-bottom: none; }

 

Simple Horizontal Navigation Menu Design कैसे बनाये

यह सबसे ज्यादातर उपयोग होने वाली menu design है जो की अधिकतर website में header के नीचे लगाया जाता है|

यह vertical menu की तरह ही काम करता है लेकिन इसमें सारे links top to bottom के बदले left to right दिखाई देते हैं|

 

हमने ऊपर जो steps follow किये हैं same हम  horizontal menu के लिए भी करेंगे बस CSS में थोड़े से बदलाव करने पड़ेंगे जो की कुछ इस प्रकार होगा:

Nav element की width, height change करेंगे

nav { background: #ccc; width: 100%; height: 50px; }

Menu के सभी borders को remove कर li को float left करेंगे

 nav ul li { float: left; }

Complete Codes For Horizontal CSS Menu

इस design के लिए complete HTML CSS codes नीचे दिया जा रहा है आप चाहें तो इसे copy कर के अपने browser पर run करके देख सकते हैं और अपने आवश्यकता अनुसार इस पर changes भी कर सकते हैं|

 

HTML Code

<html> <head> <title>Horizontal Menu</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </body> </html>

CSS Code

nav { width: 100%; height: 50px } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; } nav ul li a:hover { background-color: #2c4584; color: #fff; } nav ul li { float: left; }

आप ये सारे steps एक-एक कर follow करते हैं तो आप आसानी से अपनी website के लिए एक आकर्षक navigation का design कर पाएंगे इसके अलावा आप चाहें तो इसमें और भी changes कर सकते हैं जैसे आप इसके background में color के बदले कोई image add कर सकते हैं इसके लिए आप CSS की background property use कर सकते हैं, font में बदलाव करने के लिए font property का उपयोग कर सकते हैं ऐसे ही और भी कई सारे changes आप चाहें तो कर सकते हैं|