如何創建用戶設置下拉菜單？

Question

我正在嘗試創建一個用戶設置下拉菜單，其中包含類似於facebook和google的設計，但我不知道如何。在所附的圖像，你可以找到我想要完成的任務......任何幫助表示高度讚賞

Answer 1

嗯，我想我做到了在同一個風格，我想

enter code here 

    <div class="container"> 




      <div class="wrapper-demo"> 

       <div id="dd" class="wrapper-dropdown-5" tabindex="1"> 
        <div id="image"> </div> 
        <ul class="dropdown"> 
         <li><a href="#"><i class="icon-user"></i>Profile</a></li> 
         <li><a href="#"><i class="iconcog"></i>Settings</a></li> 
         <li><a href="#"><i class="icon-remove"></i>Logout</a></li> 
        </ul> 
       </div> 
      </div> 


    </div> 



enter code here 

*, 
*:after, 
*:before { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
padding: 0; 
margin: 0; 
} 



.wrapper-demo { 
margin: 60px 0 0 0; 
*zoom: 1; 
font-weight: 400; 
} 




.wrapper-dropdown-5 { 
/* Size & position */ 
position: relative; 
width: 100px; 
margin: 0 auto; 
padding: 12px 15px; 
height: 50px; 
/* Styles */ 
background: #2F3B31; 
border-radius: 0px; 
box-shadow: 0 1px 0 rgba(0,0,0,0.2); 
cursor: pointer; 
outline: none; 
-webkit-transition: all 0.3s ease-out; 
-moz-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
} 
#image 
{ 
width:45px; 
height:46px; 
border:solid #666; 
border-radius:5px; 
-moz-border-radius: 5px; 
background-image: url("http://i.imgur.com/kLz97bG.png?1"); 
-webkit-border-radius:5px; 
margin-top:-10px; 
margin-left:-8px; 
} 

.wrapper-dropdown-5:after { /* Little arrow */ 
content: ""; 
width: 0; 
height: 0; 
position: absolute; 
top: 50%; 
right: 15px; 
margin-top: -3px; 
border-width: 6px 6px 0 6px; 
border-style: solid; 
border-color: #9F9F9F transparent; 


} 

.wrapper-dropdown-5 .dropdown { 
/* Size & position */ 
position: absolute; 
top: 100%; 
left: 0; 
right: 0; 

/* Styles */ 
background: #9F9F9F; 
border-radius: 0px; 
border: 1px solid rgba(0,0,0,0.2); 
border-top: none; 
border-bottom: none; 
list-style: none; 
-webkit-transition: all 0.3s ease-out; 
-moz-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 

/* Hiding */ 
max-height: 0; 
overflow: hidden; 
    } 
.dropdown 
{ 
width:200px; 
} 

    .wrapper-dropdown-5 .dropdown li { 
    padding: 0 10px ; 

    } 

.wrapper-dropdown-5 .dropdown li a { 

    display: block; 
    text-decoration: none; 
    color: #333; 
    padding: 10px 0; 
    transition: all 0.3s ease-out; 
    border-bottom: 1px solid #e6e8ea; 
    } 

.wrapper-dropdown-5 .dropdown li:last-of-type a { 
border: none; 
} 

.wrapper-dropdown-5 .dropdown li i { 
    width:200px; 
margin-right: 5px; 
color: inherit; 
vertical-align: middle; 
} 

/* Hover state */ 

.wrapper-dropdown-5 .dropdown li:hover a { 
color: #FFFFFF; 

} 

/* Active state */ 

.wrapper-dropdown-5.active { 
border-radius: 0px 0px 0 0; 
background: #949594; 
box-shadow: none; 
border-bottom: none; 
color: white; 
    } 

.wrapper-dropdown-5.active:after { 
border-color: #82d1ff transparent; 
    } 

.wrapper-dropdown-5.active .dropdown { 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    max-height: 400px; 
    } 

JS

enter code here 
     function DropDown(el) { 
      this.dd = el; 
      this.initEvents(); 
     } 
     DropDown.prototype = { 
      initEvents : function() { 
       var obj = this; 

       obj.dd.on('click', function(event){ 
        $(this).toggleClass('active'); 
        event.stopPropagation(); 
       }); 
      } 
     } 

     $(function() { 

      var dd = new DropDown($('#dd')); 

      $(document).click(function() { 
       // all dropdowns 
       $('.wrapper-dropdown-5').removeClass('active'); 
      }); 

     }); 

工作示例jsFiddle

Answer 2

請參考以下鏈接：

http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html

Javascript代碼：

<script type="text/javascript" > 
$(document).ready(function() 
{ 

$(".account").click(function() 
{ 
var X=$(this).attr('id'); 
if(X==1) 
{ 
$(".submenu").hide(); 
$(this).attr('id', '0'); 
} 
else 
{ 
$(".submenu").show(); 
$(this).attr('id', '1'); 
} 

}); 

//Mouse click on sub menu 
$(".submenu").mouseup(function() 
{ 
return false 
}); 

//Mouse click on my account link 
$(".account").mouseup(function() 
{ 
return false 
}); 


//Document Click 
$(document).mouseup(function() 
{ 
$(".submenu").hide(); 
$(".account").attr('id', ''); 
}); 
}); 
</script> 

HTML代碼：

<div class="dropdown"> 
<a class="account" >My Account</a> 

<div class="submenu"> 
<ul class="root"> 
<li ><a href="#Dashboard" >Dashboard</a></li> 
<li ><a href="#Profile" >Profile</a></li> 
<li ><a href="#settings">Settings</a></li> 
<li ><a href="#feedback">Send Feedback</a></li> 
</ul> 
</div> 

</div> 

Answer 3

試試這個。

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    outline: none; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html { height: 101%; } 
body { background: #dde9f0; font-family: Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
ol, ul { list-style: none; } 

blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; } 
img { border: 0; max-width: 100%; } 

h1 { display: block; font-size: 2.75em; line-height: 2.35em; color: #7291a5; margin-bottom: 12px; font-weight: normal; font-family: 'Oldenburg', 'Trebuchet MS', Arial, sans-serif; text-shadow: 0px 1px 1px #fff; text-align: center; } 

p { font-size: 1.2em; font-weight: normal; line-height: 1.35em; color: #343434; margin-bottom: 12px; } 

/* page container */ 
#wrap { display: block; width: 850px; margin: 0 auto; padding-top: 35px; } 


/* user menu settings */ 
#dropdown { 
    display: block; 
    padding: 13px 16px; 
    width: 266px; 
    margin: 0 auto; 
    position: relative; 
    cursor: pointer; 
    border-left: 4px solid #739cda; 
    background: #fff; 
    font-size: 1.55em; 
    color: #656565; 
    font-weight: normal; 
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    -ms-transition: all 0.15s linear; 
    -o-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 
#dropdown:hover { color: #898989; } 

#dropdown.open { 
    background: #5a90e0; 
    color: #fff; 
    border-left-color: #6c6d70; 
} 

#dropdown ul { 
    position: absolute; 
    top: 100%; 
    left: -4px; /* move content -4px because of container left border */ 
    width: 266px; 
    padding: 5px 0px; 
    display: none; 
    border-left: 4px solid #8e9196; 
    background: #fff; 
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
} 
#dropdown ul li { font-size: 0.9em; } 

#dropdown ul li a { 
    text-decoration: none; 
    display: block; 
    color: #447dd3; 
    padding: 7px 15px; 
} 
#dropdown ul li a:hover { 
    color: #6fa0e9; 
    background: #e7f0f7; 
} 

HTML Marktup

<!doctype html> 
<html lang="en-US"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <title>User Settings Dropdown Menu</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!--[if lt IE 9]> 
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 

<body> 
    <div id="wrap"> 
    <h1>Stylish User Settings Menu</h1> 

    <div id="dropdown" class="ddmenu"> 
     User Settings 
     <ul> 
     <li><a href="#">My Profile</a></li> 
     <li><a href="#">Friend Requests</a></li> 
     <li><a href="#">Account Settings</a></li> 
     <li><a href="#">Support</a></li> 
     <li><a href="#">Log Out</a></li> 
     </ul> 
    </div> 
    </div> 
<script type="text/javascript"> 
$("#dropdown").on("hover", function(e){ 
    e.preventDefault(); 

    if($(this).hasClass("open")) { 
    $(this).removeClass("open"); 
    $(this).children("ul").slideUp("fast"); 
    } else { 
    $(this).addClass("open"); 
    $(this).children("ul").slideDown("fast"); 
    } 
}); 
</script> 
</body> 
</html> 

檢查的jsfiddle：http://jsfiddle.net/EhgsF/