右側のFacebookやGoogleに似たデザインのユーザー設定ドロップダウンメニューを作成しようとしていますが、方法がわかりません。添付の画像で、私が達成したいことを見つけることができます...どんな助けでも大歓迎です
質問する
4661 次
3 に答える
2
まあ、私は私が望んでいたのと同じスタイルでそれをしたと思います
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
于 2013-03-09T02:27:00.067 に答える
1
このリンクを参照してください：
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>
于 2013-03-07T05:30:15.983 に答える
0
これを試して。
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マークアップ
<!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/
于 2013-03-07T13:13:53.697 に答える