如何创建用户设置下拉菜单？

Question

我正在尝试创建一个用户设置下拉菜单，其设计与Facebook和谷歌的设计类似，但我不知道如何。在附图中，您可以找到我想要完成的任何内容...非常感谢任何帮助

Answer 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>

Answer 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

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/