CSS से Simple Dropdown Navigation Menu कैसे बनायें

Website में menu के जरिये contents को अलग-अलग categories में divide किया जाता ताकि user को उसे ढूँढने में आसानी हो, वैसे तो एक simple navigation से काम चल जाता है लेकिन कई बार हमें एक category के अंदर multiple sub categories बनाने पड़ते हैं।

इस स्थिति में हमें एक ऐसे menu structure की जरूरत पड़ती है जिसमे आसानी से सभी main और sub categories को दिखा सकें ऐसे में dropdown navigation design बहुत ही उपयोगी होता है।

इसमे हम sub menus का उपयोग करके कम space में एक बेहतर navigation बना सकते हैं। ज्यादातर dropdown जो हम दुसरे websites में देखते हैं उनमे JavaScript का उपयोग किया जाता है लेकिन आज इस article में केवल HTML और CSS का उपयोग कर एक simple dropdown navigation हम step by step तरीके से design करना सीखेंगे।

Simple Horizontal Dropdown Navigation Design कैसे बनायें?

इस tutorial में हम आसान steps का उपयोग कर CSS से एक horizontal dropdown navigation बनायेंगे जिसे अधिकतर किसी वेबसाइट में header के ऊपर या नीचे लगाया जाता है।

इस प्रकार के menu का concept यह है की जब हम किसी button पर mouse hover करते हैं तब उसका background color change होता है और उसके नीचे एक sub-navigation display होता है।

आप नीचे दिए गये steps को follow कर आसानी से इस design को बना सकते हैं।

Step 1: HTML Code For Dropdown Menu

यदि आप पहली बार मेनू डिजाईन कर रहें हैं तो यह आपके लिए थोडा confusing हो सकता है इसलिए आप इससे पहले एक basic navigation बनाना सीखें।

इस प्रकार के मेनू के लिए हम unordered list का उपयोग कर links का एक list बनायेंगे| इसके लिए HTML code नीचे दिया गया है। आप नीचे देख सकते हैं इसके लिए हमने <ul> का use किया है जो की एक <nav> element के अंदर है और इसमें हमने कोई भी ID या class का उपयोग नही किया है।

<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>

जिसका output कुछ इस प्रकार दिखाई देगा:

Step 2: Nav element में background color add करना

अब हम एक CSS file बना कर style create करना शुरू करेंगे| मेनू के background में कुछ कलर डालेंगे जिससे यह और अच्छा दिखाई दे इसके लिए nav element में CSS की background color property apply करेंगे।

nav{ 
background: #e64a19;
}

Step 3: ul से default margin, padding और list-style को remove करेंगे

By default HTML element में कुछ margin और padding सेट होता है जिसे हम हटा देंगे जिससे की unwanted spaces remove हो जायेंगे| इसके लिए हम इन properties की value को 0 set कर देंगे।

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

इस कोड को apply करने के बाद browser पर यह कुछ ऐसे दिखाई देगा:

Step 4: List item <li> की styling करेंगे

List item की style को इस प्रकार change करेंगे की सभी items horizontal line में display हो और अलग-अलग button के समान काम करे इसके लिए display की default value को बदल कर inline-block करेंगे।   sub-menu को उसके parent-menu के नीचे दिखाने के लिए position relative का उपयोग करेंगे| Padding से थोडा space डालेंगे और text के color को white करेंगे।

nav ul li {
font: bold 12px sans-serif;
display: inline-block;
position: relative;
padding: 15px 20px;
color:#fff;
}

इससे main-menu design हो जायेगा जो कुछ नीचे दिए screenshot की तरह होगा।

Step 5: Sub Menu Add करना

अब हमने एक simple navigation design कर लिए है लेकिन इसमें sub items add करना बाकी है इसके लिए nested unordered list create करेंगे, Services वाले li के अंदर एक <ul> add करते हैं जिसके अंदर list item में हम तीन links insert करेंगे| इसका HTML markup नीचे दिया गया है।

<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>

sub-navigation insert करने के बाद यह कुछ ऐसा दिखेगा:

Step 6: Sub-menu की Position Set करना और By Default Hide रखना

Sub items के position को normal flow से हटा कर हमारे द्वारा बताये गये स्थान पर और उस page के बाकी contents के ऊपर display कराने के लिए हमें absolute position का उपयोग करना होगा अब top property द्वारा इसे ऊपर से 44px नीचे set किया जायेगा।

by default हमें sub-menu को hide करना होगा और वह तभी दिखाई देगा जब particular li के  ऊपर mouse hover किया जायेगा|s hide करने के लिए display property को none करना पड़ेगा।

ul li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
}

Step 7: Hover करने पर Background color बदलना और Dropdown को Show करना

Button पर hover करने पर उसका background कलर change हो और hide किये गये <ul> यानि sub-navigation को display करने के लिए नीचे दिए कोड का उपयोग करना पड़ेगा।

ul li:hover ul{
display: block;
}
ul li:hover {
background: #383838;
color: #fff;
}

यहाँ पर ul li:hover ul का मतलब है की first वाले ul के list item पर hover करने पर display property sub-menu वाले ul पर apply होगा| इसके बाद design कुछ इस तरह से दिखाई देगा:

Step 8: Dropdown और उसके List Items की Styling Change करना

Sub-menu के अंदर buttons को design करने के लिए उसमे बैकग्राउंड कलर डालेंगे और text color को white करेंगे इसके बाद इसमें hover effect add करेंगे।

ul li ul li {
background: #383838;
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}

Step 9: Links की Styling करना

अभी तक हमने links यानि <a> tag को design नही किया है, by default links की color blue होती है और उसमे underline होता है जिसे हमको remove करना है इसके लिए हम नीचे दिए कोड का उपयोग करेंगे।

ul li ul li a{
color: #fff;
text-decoration: none;
display: block;
}

Final Result

अब finally हमारा dropdown menu बन कर तैयार है जिसका screenshot आप नीचे देख सकते हैं।

Complete HTML CSS Code For Horizontal Dropdown Menu

अब आप इस डिजाईन का पूरा कोड नीचे देख सकते हैं, आप चाहें तो इसे copy कर इसे अपने system पर run करके देख सकते हैं। आप चाहें तो इसमें कुछ बदलाव कर test कर सकते हैं

HTML

<!DOCTYPE html>
<html>
<head>
<title>Dropdown menu</title>
<link href="dropdown.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>

CSS

nav {
background: #e64a19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none
}
nav ul li {
font: bold 12px sans-serif;
display: inline-block;
position: relative;
padding: 15px 20px;
color: #fff;
}
ul li:hover {
background: #383838;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
}
ul li ul li {
background: #383838;
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}
ul li ul li a {
color: #fff;
text-decoration: none;
display: block;
}
ul li:hover ul {
display: block;
}

आज आपने इस article में simple dropdown navigation बनाना सीखा आप चाहें तो इसके design में अपने अनुसार बदलाव भी कर कुछ experiments भी कर सकते हैं।

अगर आपको dropdown menu बनाने में कोई परेशानी हो रही है या आप कुछ सवाल पूछना चाहते हैं तो आप नीचे कमेंट  बॉक्स के जरिये अपनी बात रख सकते हैं।