शुद्ध सीएसएस आधारित ड्रॉपडाउन मेनू कैसे बनाएं?

मैं देख रहा हूँ क्षैतिज ड्रॉप-डाउन मेनू शुद्ध सीएसएस आधारित और ब्राउज़र संगत ....शुद्ध सीएसएस आधारित ड्रॉपडाउन मेनू कैसे बनाएं?

मैं उदाहरण के नीचे उल्लेख की तरह देख रहा हूँ

enter image description here

स्रोत

2012-03-31 Rohit Azad

जाने और 'के लिए गूगल शुद्ध सीएसएस ड्रॉप डाउन '। बिना 'javscript' के बीटीडब्ल्यू यह जटिल होगा – diEcho

@ सुमंत हाय यह नौवी कहाँ मुझे उचित लिंक भेज सकता है। –

@Shailender अरोड़ा के साथ जाएं इसके ठीक – Sumant

देखते हैं कि यह शुद्ध सीएसएस ठिकानों है लटकती मेनू: -

एचटीएमएल

<ul id="menu"> 
     <li><a href="">Home</a></li> 
     <li><a href="">About Us</a> 
     <ul> 
     <li><a href="">The Team</a></li> 
     <li><a href="">History</a></li> 
     <li><a href="">Vision</a></li> 
     </ul> 
     </li> 
     <li><a href="">Products</a> 
     <ul> 
     <li><a href="">Cozy Couch</a></li> 
     <li><a href="">Great Table</a></li> 
     <li><a href="">Small Chair</a></li> 
     <li><a href="">Shiny Shelf</a></li> 
     <li><a href="">Invisible Nothing</a></li> 
     </ul> 
     </li> 
     <li><a href="">Contact</a> 
     <ul> 
     <li><a href="">Online</a></li> 
     <li><a href="">Right Here</a></li> 
     <li><a href="">Somewhere Else</a></li> 
     </ul> 
     </li> 
    </ul>

सीएसएस

ul 
{ 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul li 
{ 
    display: block; 
    position: relative; 
    float: left; 
} 

li ul 
{ 
    display: none; 
} 

ul li a 
{ 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

ul li a:hover 
{ 
    background: #617F8A; 
} 
li:hover ul 
{ 
    display: block; 
    position: absolute; 
} 

li:hover li 
{ 
    float: none; 
    font-size: 11px; 
} 

li:hover a 
{ 
    background: #617F8A; 
} 

li:hover li a:hover 
{ 
    background: #95A9B1; 
}

डेमो देखें: - http://jsfiddle.net/XPE3w/7/

स्रोत

2012-03-31 06:14:53

किसी और ने इसे सभी ब्राउज़रों में आजमाया है? क्या यह बहु ब्राउज़र संगत है? –

मोबाइल संगत नहीं है। –

मोबाइल पर केवल काम नहीं करता है क्योंकि 'होवर' मोबाइल पर कठिन है। जावास्क्रिप्ट की एक पंक्ति जोड़ने में आसान है जो क्लिक पर मेनू दिखाता है। –

IE7 में परीक्षण किया गया - 9 और Firefox: http://jsfiddle.net/WCaKg/। मार्कअप:

<ul> 
    <li>&lt;li&gt;</li> 

    <li>&lt;li&gt;</li> 

    <li>&lt;li&gt; 

     <ul> 
      <li>&lt;li&gt;</li> 

      <li>&lt;li&gt;</li> 

      <li>&lt;li&gt;</li> 

      <li>&lt;li&gt;</li> 
     </ul> 
    </li> 

    <li>&lt;li&gt;</li> 

    <li>&lt;li&gt;</li> 

    <li>&lt;li&gt;</li> 
</ul>

सीएसएस:

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font: 200%/1.5 Optima, 'Lucida Grande', Lucida, 'Lucida Sans Unicode', sans-serif; 
} 

ul { 
    width: 9em; 
    list-style-type: none; 
    font-size: 0.75em; 
} 

li { 
    float: left; 
    margin: 0 4px 4px 0; 
    background: #60c; 
    background: rgba(102, 0, 204, 0.66); 
    border: 4px solid #60c; 
    color: #fff; 
} 
li:hover { 
    position: relative; 
} 

ul ul { 
    z-index: 1; 
    position: absolute; 
    left: -999em; 
    width: auto; 
    background: #ccc; 
    background: rgba(204, 204, 204, 0.33); 
} 

li:hover ul { 
    top: 2em; 
    left: 3px; 
} 

li li { 
    margin: 0 0 3px 0; 
    background: #909; 
    background: rgba(153, 0, 153, 0.66); 
    border: 3px solid #909; 
}

स्रोत

2012-03-31 07:13:17 roger

आप अन्य तत्वों भी उपयोग कर सकते हैं के रूप में नीचे देखा, हमेशा कि प्राप्त करने के लिए ul तत्वों का उपयोग करने की जरूरत नहीं है। यहां 2 उदाहरण हैं, div का उपयोग करके एक और select का उपयोग कर रहा है।

यह उदाहरण बुनियादी कार्यक्षमता को दर्शाता है, लेकिन इसे बढ़ाया/समृद्ध किया जा सकता है। यह केवल लिनक्स में परीक्षण किया जाता है (आइसवेसेल और क्रोम)।

<!DOCTYPE html> 
<html> 
<head> 
<meta charset='UTF-8'> 
<style> 
.drop_container 
{ 
    position:relative; 
    float:left; 
} 
.always_visible 
{ 
    background-color:#FAFAFA; 
    color:#333333; 
    font-weight:bold; 
    cursor:pointer; 
    border:2px silver solid; 
    margin:0px; 
    margin-right:5px; 
    font-size:14px; 
    font-family:"Times New Roman", Times, serif; 
} 
.always_visible:hover + .hidden_container 
{ 
    display:block; 
    position:absolute; 
    color:green; 
} 
.hidden_container 
{ 
    display:none; 
    border:1px gray solid; 
    left:0px; 
    background-color:#FAFAFA; 
    padding:5px; 
    z-index:1; 
} 
.hidden_container:hover 
{ 
    display:block; 
    position:absolute; 
} 
.link 
{ 
    color:blue; 
    white-space:nowrap; 
    margin:3px; 
    display:block; 
} 
.link:hover 
{ 
    color:white; 
    background-color:blue; 
} 
.line_1 
{ 
    width:800px; 
    border:1px tomato solid; 
    padding:5px; 
} 
</style>  
</head> 

<body> 

<div class="line_1"> 
<div class="drop_container"> 
    <select class="always_visible" disabled><option>Select</option></select> 
    <div class="hidden_container"> 
    <a href="http://www.google.gr" class="link">Option_ 1</a> 
    <a href="http://www.google.gr" class="link">Option__ 2</a> 
    <a href="http://www.google.gr" class="link">Option___ 3</a> 
    <a href="http://www.google.gr" class="link">Option____ 4</a> 
    </div> 
</div> 
<div class="drop_container"> 
    <select class="always_visible" disabled><option>Select</option></select> 
    <div class="hidden_container"> 
    <a href="http://www.google.gr" class="link">____1</a> 
    <a href="http://www.google.gr" class="link">___2</a> 
    <a href="http://www.google.gr" class="link">__3</a> 
    <a href="http://www.google.gr" class="link">_4</a> 
    </div> 
</div> 
<div style="clear:both;"></div> 
</div> 

<br> 

<div class="line_1"> 
<div class="drop_container"> 
    <div class="always_visible">Select___</div> 
    <div class="hidden_container"> 
    <a href="http://www.google.gr" class="link">Option_ 1</a> 
    <a href="http://www.google.gr" class="link">Option__ 2</a> 
    <a href="http://www.google.gr" class="link">Option___ 3</a> 
    <a href="http://www.google.gr" class="link">Option____ 4</a> 
    </div> 
</div> 
<div class="drop_container"> 
    <div class="always_visible">Select___</div> 
    <div class="hidden_container"> 
    <a href="http://www.google.gr" class="link">Option_ 1</a> 
    <a href="http://www.google.gr" class="link">Option__ 2</a> 
    <a href="http://www.google.gr" class="link">Option___ 3</a> 
    <a href="http://www.google.gr" class="link">Option____ 4</a> 
    </div> 
</div> 
<div style="clear:both;"></div> 
</div> 

</body> 
</html>

स्रोत

2014-07-13 01:53:46 Melsi

कोड देखें पर ऑनलाइन: WebCrafts.org

एचटीएमएल कोड:

<body id="body"> 
<div id="navigation"> 
    <h2> 
     Pure CSS Drop-down Menu 
    </h2> 
    <div id="nav" class="nav"> 
    <ul> 
     <li><a href="#">Menu1</a></li> 
     <li> 
      <a href="#">Menu2</a> 
      <ul> 
       <li><a href="#">Sub-Menu1</a></li> 
       <li> 
        <a href="#">Sub-Menu2</a> 
        <ul> 
         <li><a href="#">Demo1</a></li> 
         <li><a href="#">Demo2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub-Menu3</a></li> 
       <li><a href="#">Sub-Menu4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu3</a></li> 
     <li><a href="#">Menu4</a></li> 
    </ul> 
    </div> 
</div> 
</body>

CSS कोड:

body{ 
    background-color:#111; 
} 

#navigation{ 
    text-align:center; 
} 
#navigation h2{ 
    color:#DDD; 
} 

.nav{ 
    display:inline-block; 
    z-index:5; 
    font-weight:bold; 
} 
.nav ul{ 
    width:auto; 
    list-style:none; 
} 

.nav ul li{ 
    display:inline-block; 
} 

.nav ul li a{ 
    text-decoration:none; 
    text-align:center; 
    color:#222; 
    display:block; 
    width:120px; 
    line-height:30px; 
    background-color:gray; 
} 

.nav ul li a:hover{ 
    background-color:#EEC; 
} 
.nav ul li ul{ 
    margin-top:0px; 
    padding-left:0px; 
    position:absolute; 
    display:none; 
} 

.nav ul li:hover ul{ 
    display:block; 
} 

.nav ul li ul li{ 
    display:block; 
} 

.nav ul li ul li ul{ 
    margin-left:100%; 
    margin-top:-30px; 
    visibility:hidden; 
} 

.nav ul li ul li:hover ul{ 
    margin-left:100%; 
    visibility:visible; 
}

स्रोत

2014-08-09 13:28:43

html, body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
/* define a fixed width for the entire menu */ 
 
.navigation { 
 
    width: 150px; 
 
} 
 

 
/* reset our lists to remove bullet points and padding */ 
 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
/* make ALL links (main and submenu) have padding and background color */ 
 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 
/* add hover behaviour */ 
 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 

 
/* when hovering over a .mainmenu item, 
 
    display the submenu inside it. 
 
    we're changing the submenu's max-height from 0 to 200px; 
 
*/ 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 
/* 
 
    we now overwrite the background-color for .submenu links only. 
 
    CSS reads down the page, so code at the bottom will overwrite the code at the top. 
 
*/ 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 
/* hover behaviour for links inside .submenu */ 
 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 
/* this is the initial state of all submenus. 
 
    we set it to max-height: 0, and hide the overflowed content. 
 
*/ 
 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<html> 
 
<body> 
 
<head> 
 
<link rel="stylesheet" type="css/text" href="nav.css"> 
 
</head> 
 
</body> 
 
<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact us</a></li> 
 
    </ul> 
 
</nav>

स्रोत

2016-05-10 10:29:13

सरल ड्रॉप-डाउन मेनू बनाएँ HTML और सीएसएस

सीएसएस का उपयोग कर:

<style> 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px; 
    z-index: 1; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style>

और एचटीएमएल:

<div class="dropdown"> 
    <span>Mouse over me</span> 
    <div class="dropdown-content"> 
    <p>Hello World!</p> 
    </div> 
</div>

View demo online

स्रोत

2018-02-12 21:33:20 Rizo

शुद्ध सीएसएस आधारित ड्रॉपडाउन मेनू कैसे बनाएं?

उत्तर

संबंधित मुद्दे