HTML Or CSS Se Simple Menu Kaise Design Kare ? Hello Friends इस article में हम आपको एक Simple सा Menu Design करना सिखाएंगे सिर्फ HTML और CSS की Help से।
आपने कभी कोई Website बिना Menu के देखी है ? नहीं देखी होगी क्योंकि हर Website में Menu होता ही होता भले ही छोटा Menu हो। आपने कभी कोई Website बिना Menu के देखी है ? नहीं देखी होगी क्योंकि हर Website में Menu होता ही होता भले ही छोटा Menu हो।
एक Menu के Help से आप अपने Users को अपना Content या Information Directly show करा सकते है। तो चलिए Start करते है Menu Design करना। HTML Or CSS Se Simple Menu Kaise Design Kare ?
हम आपको step-by-step बनाना सीखेंगे जिससे की आप Easily Menu Create करना सिख जायेंगे। आज हम आपको Horizontal और Vertical दोनों तरह के Navigation Design इस एक Article में सिखाएगें।
इस Simple Navigation Menu को Design करना बहुत ही Easy होता है , इसके लिए आपको ज्यादा कुछ करने की जरूरत नहीं होती है न ही इसमें jQuery और Javascript के Code लिखने की जरूरत होती। इस Simple Menu को हम सिर्फ HTML और CSS की Help से Easily बना सकते है।
Vertical Navigation Menu कैसे Design करे ?
Vertical Menu Bar में Menu को Vertical List की तरह Show किया जाता है। एक Lists की तरह Menu को Show किया जाता है।
- सबसे पहले आपको Menu के लिए HTML Structure
<!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>
जैसा की आप ऊपर Code में देख सकते है की हमने सबसे पहले HTML Structure Ready किया है उसके बाद body के अंदर <nav> tag का Use करके <ul> और <li> का use किया है। <ul> का मतलब होता है un-ordered list जिसके अंदर हम Links को Add करते है। Links को Add करने के लिए हमने <li> Element का Use किया है और उसके अंदर <a> यानि की Anchor Tag Link देने के लिए।
- अब हम Navbar को Background Color देंगे और इसकी Width Set करेंगे।
nav {
background: #2fbbb4;
width: 300px;
}- 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
Navigation Menu तब तक एक अच्छा Look नहीं देगा जब तक हम उसकी Styling नहीं कर देंगे। Styling में आप Background Color और Menu की Width Set कर सकते है और Menu के Items को Color दे सकते है। जैसा की आप ऊपर दिए हुए Code में देख सकते है हमने अभी Background Color और Width दी है।
- अब हम Browser की Default Settings को Remove करेंगे।
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}By Default Browser में कुछ Settings होती है जिनको Need पड़ने पर हमको Remove करना होता है। <ul> element में by default थोड़ा margin और padding ले लेता है जिसको हम Remove कर रहे है उसकी Value 0 कर रहे है।
और li में by default bullets Set होते है और Menu में bullets का कुछ काम नहीं होता इसलिए हम इनको भी Remove कर देंगे। bullets को हटाने के लिए हम list-style-type: none Use करेंगे।
अब हम <a> Element की Styling करेंगे।
nav ul li a {
display: block;
color: #fff;
padding: 10px;
text-decoration: none;
text-align: center;
}अब हम अपने Menu को थोड़ा और Attractive करेंगे Text को Color देंगे , उसका Alignment Set करेंगे। एक बार इस Code को समझ लेते है।
- display:block – display: block Use करने से पूरा Area Clickable बन जाता है , उससे पहले सिर्फ Text Area ही Clickable होता है। अगर आप Text के बाहर Click करोगे तो वो Link काम नहीं करेगा और display: block Use करने से सारा Area ही Clickable बन जाता है।
- color – Text को Color देने के लिए आप कोई भी Color Code Use कर सकते है।
- padding – Text और List के बीच में Space Create करने के लिए padding का Use किया जाता है।
- text-decoration: none – text-decoration: none का Use Text में जो By Default Underline आ जाती है उसको Remove करने के लिए।
- text-align: center – text-align: center का Use Text को Center Align करने के लिए आप Text को Left या Right भी रख सकते है।
- अब Hover Effect Add करेंगे Menu में।
nav ul li a:hover {
background-color: #134139;
color: #fff;
}Hover Effect का Use Site को और भी Attractive और Effective बनाने के लिए किया जाता है। इससे क्या होता है जब हम Mouse किसी भी Text पर लेके जाते है तब उसका background color या Text Color change हो जाता है , जिससे Site और भी Effective लगती है। Hover Effect Add करने के लिए हम CSS code का Use करते है।
Complete Code of Simple Vertical Navbar Menu With HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Navbar></title>
<link rel"stylesheet" href="assets/css/style.css">
</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>
nav {
background: #2fbbb4;
width: 300px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li a {
display: block;
color: #fff;
padding: 10px;
text-decoration: none;
text-align: center;
}
nav ul li a:hover {
background-color: #134139;
color: #fff;
}Horizontal Navigation Menu कैसे Design करे ?
Mostly Websites में Horizontal Menu Use किया जाता है ,जिसके अंदर Menu Items Left to Right Show होते है।
Horizontal Menu के लिए भी Same Vertical Menu की तरह ही Code होता है बस आपको CSS में थोड़े से Changes करने होंगे। Horizontal Menu के लिए भी Same Vertical Menu की तरह ही Code होता है बस आपको CSS में थोड़े से Changes करने होंगे। इसमें आपको Menu की Width और Height Change करनी है। width को 100% करना है और height आप अपनी मर्जी से कुछ भी ले सकते है हम यहाँ पर 50px ले रहे है।
nav {
background: #2fbbb4;
width: 100%;
height: 50px;
}एक छोटा सा Code और Add करना है आपको li को float left जिससे की वो left तो right place हो जाये।
nav ul li {
float: left;
}Complete Code of Simple Horizontal Navbar Menu With HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Navbar></title>
<link rel"stylesheet" href="assets/css/style.css">
</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>
nav {
background: #2fbbb4;
width: 100%;
height: 50px;
}
nav ul li {
float: left;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li a {
display: block;
color: #fff;
padding: 16px;
text-decoration: none;
text-align: center;
}
nav ul li a:hover {
background-color: #134139;
color: #fff;
}Conclusion
इस लेख के जरिये आपने जाना कि CSS & HTML की Help से एक Simple Navbar Menu Design करना सिखाया है Step by Step Output Show करते हुए। उम्मीद है यह लेख आपके लिए Helpful रहा होगा । अगर आपको मन में CSS & HTML से Related किसी भी तरह के कोई भी Question है तो आप हमें नीचे Comment कर पूछ सकते है।
