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

Question

我正在尝试创建一个与右侧的 facebook 和 google 具有相似设计的用户设置下拉菜单，但我不确定如何。在所附图片中，您可以找到我想要完成的任务......非常感谢任何帮助

score 2 · Accepted Answer

好吧，我想我是按照我想要的风格做的

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

score 1 · Accepted Answer

参考这个链接：

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>

score 0 · Accepted Answer

尝试这个。

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/

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

3 回答 3

Related

Reference