Dropdown Navigation Menu kaise Banaye : Hello Friends इस Article में हम आपको एक Drop Down Menu Design करना सिखाएंगे। जिस तरह से एक Site में एक Menu बहुत Important होता है उसी तरह से Drop Down Menu भी Website में Categories को Show करने के लिए Important होता है।
कभी कभी categories की Sub Categories होती है और Product के भी Sub Product होते है , जिसके लिए हमको Dropdown Menu बनाना पड़ता है। जिससे user को Sub Categories Search करने की जरूरत नहीं पड़ती वो Easily Menu की Help से सारी Information देख सकता है।
Dropdown Navigation Menu kaise Banaye
आज हम इस Article के Through बहुत Easy Step से Dropdown Navigation Design करना सीखेंगे। लेकिन उसे पहले आपको एक Simple Navigation Menu Design करना आना चाहिए वरना आप इसमें थोड़ा Confuse हो सकते है।
अगर आपने अभी तक कभी Simple Navigation Menu Design नहीं किया है तो आप इस Article को Read कर सकते है।HTML Or CSS Se Simple Menu Kaise Design Kare ?
क्या आप जानते है की Dropdown Navigation काम कैसे करता है इसका Concept ये होता है की जब हम किसी Menu पर Mouse लेके जायेंगे तो हमे उसकी Sub Categories Show होती है। और कभी कभी Sub Categories की भी Sub Categories होती है जिनको हम Dropdown Navigation के जरिये दिखा सकते है।
HTML Sturcture For Dropdown Menu
ये Dropdown menu हम सिर्फ HTML और CSS की Help से बनाएँगे , इसके लिए किसी भी तरह की कोई javascript या jquery की जरुरत है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Navbar></title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="service.html">Our Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>किसी भी तरह के Menu को Design करने के लिए सबसे पहले HTML Code लिखना पड़ता है। और List को Create करने के लिए <ul> यानि Unordered List का Use करते है। जैसा की ऊपर Code में देख सकते है <nav> Tag अंदर ul और उसके अंदर li यानि की List Item और उसके बाद Link देने Anchor Tag का Use करते है।
Add Background Color In Nav Element
nav {
background: #2fbbb4;
}अगर आप एक Designer है तो आपको तो पता ही होगा किसी भी Element को Style करने के लिए Css Code लिखना पड़ता है। यहाँ पर हमने nav Tag में CSS की background color property लगाई है उसमे Background Color दिया है ।
- Html Tag | Html Tag क्या है ? | Types Of Tags | Tag को कैसे use करें ?
- HTML क्या है – What is HTML in Hindi? and Features of HTML in Hindi ?
- CSS Kya Hai ? | What is CSS in Hindi | CSS का उपयोग कैसे किया जाता है ?
- CSS Selectors Kya Hai ? | CSS Selectors In Hindi ?
- HTML Attributes Kya Hote Hai? | What is HTML Attribute
- HTML Elements kya Hote hai ? | HTML Elements List
Remove Default Margin , Padding and List-Style From ul
nav ul {
list-style-type: none;
padding: 0;
margin: 0; }By Default Browser में कुछ Settings होती है जिनको Remove करने की जरुरत होती है। <ul> Element में By Default margin और padding set हो जाती है, जिसको हम Remove कर रहे है उसकी Value 0 कर रहे है।
और li के अंदर भी By Default Bullets Set होते है , इसलिए हम इनको भी Remove कर देंगे। Bullets को हटाने के लिए हम list-style-type: none Use करते है।
Styling Of List Item <li>
nav ul li {
font-family:monospace;
display: inline-block;
font-size: 20px;
position: relative;
padding: 12px 18px;
color:#fff; }एक Site तब खिल कर सामने आती है जब उसके एक एक Element को Style किया गया हो। अभी तक Menu की List Vertical Show हो रही थी , हमें List Items को Horizontal Line में Display करना है उसके लिए हम उसकी Default Value को Change करेंगे। उसके लिए हम inline-block का Use करेंगे।
sub-menu को उसके parent-menu के Just नीचे Show कराने के लिए position relative का Use करेंगे। बाकि Space देने के लिए हम Padding देंगे और text को Color देंगे।
Add Sub Menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Navbar></title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="service.html">Our Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Seo Services</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>अब हम Sub Menu Add कर चुके है , अब तक हमने Simple Menu Add किया था। Sub Menu Add करने के लिए हमने Nested Unordered List Create किया है। li के अंदर ul add किया है , और उसके अंदर List Items Add किये है। आप ऊपर दिया हुआ Code Check कर सकते है।
Set the Position Of Sub Menu and By Default Hide
Sub items की Position को Set करने के लिए और उसको Parent Menu के निचे Display कराने के लिए हम absolute position का Use करते है और फिर उसको Top से Margin देके Set करते है।
Menu By Default Hide होना चाहिए और Mouse ले जाने पर Show होना चाहिए , उसके लिए display property को none करना होता है।
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 186px;
display: none;
background-color: #2fbbb4;
}
Change Background Color On Hover and Show Dropdown Menu
Hover पर Background Color Change करने के लिए और Sub Menu को Display कराने के लिए display : block Property का Use करेंगे।
ul li:hover ul{
display: block; }
ul li:hover {
background: #383838;
color: #fff; }
Change List Items and Dropdown Menu
ul li ul li {
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}Final Output
Complete HTML Code For Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Navbar></title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="service.html">Our Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Seo Services</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>Complete CSS Code For Dropdown Menu
nav {
background: #2fbbb4;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
font-family:monospace;
display: inline-block;
font-size: 20px;
position: relative;
padding: 12px 18px;
color:#fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 186px;
display: none;
background-color: #2fbbb4;
}
nav ul li a {
display: block;
color: #fff;
padding: 10px;
text-decoration: none;
text-align: center;
}
ul li:hover ul{
display: block;
}
ul li:hover {
background: #383838;
color: #fff;
}
ul li ul li {
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}
