कैसे बनाएं: उपनेविगेशन
- 上一页 带下拉菜单的响应式导航栏
- 下一页 上拉菜单
CSS के साथ उपनेविगेशन मेनू बनाना सीखें。
उपनेविगेशन
उपनेविगेशन बनाएं
पहला कदम - HTML जोड़ें:
<!-- 加载 Font Awesome 图标 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 导航菜单 --> <div class="navbar"> <a href="#home">Home</a> <div class="subnav"> <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">लिंक 4</a> </div> </div> <a href="#contact">संपर्क</a> </div>
उदाहरण व्याख्या:
सब-नेविगेशन/ड्रॉपडाउन मेनू को खोलने के लिए किसी भी एलीमेंट का उपयोग किया जा सकता है, जैसे <button>、<a> या <p> एलीमेंट。
सब-नेविगेशन मेनू को बनाने के लिए कंटेनर एलीमेंट (जैसे <div>) का उपयोग करें और उसमें सब-नेविगेशन लिंक जोड़ें。
बटन और <div> को <div> एलीमेंट के भीतर रखकर सब-नेविगेशन मेनू को सही तरीके से स्थापित करने के लिए उपयोग करें。
दूसरा कदम - CSS जोड़ें:
/* नेविगेशन मेनू */ .navbar { overflow: hidden; background-color: #333; } /* नेविगेशन लिंक */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* सब-नेविगेशन मेनू */ .subnav { float: left; overflow: hidden; } /* सब-नेविगेशन बटन */ .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* माउस के सुनिश्चित होने पर नेविगेशन लिंक को लाल पृष्ठभूमि रंग जोड़ें */ .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } /* सब-नेविगेशन सामग्री के शैली को सेट करें - अभिनियत स्थिति का उपयोग करें */ .subnav-content { display: none; position: absolute; left: 0; background-color: red; width: 100%; z-index: 1; } /* सब-नेविगेशन लिंक के शैली को सेट करें */ .subnav-content a { float: left; color: white; text-decoration: none; } /* माउस के सुनिश्चित होने पर ग्रे पृष्ठभूमि रंग जोड़ें */ .subnav-content a:hover { background-color: #eee; color: black; } /* जब आप माउस को सब-नेविगेशन कंटेनर पर ले जाएंगे, सब-नेविगेशन सामग्री खोलें */ .subnav:hover .subnav-content { display: block; }
- 上一页 带下拉菜单的响应式导航栏
- 下一页 上拉菜单