Question

我想制作像Facebook这样的下拉菜单，因为我已经编写了一些代码，但我想让它完美，所以需要帮助，我也想制作通知div Slide Toggle从Top到Bottom而不是使用jquery

<html>
    <head>
        <style type="text/css">
        *{
            margin: 0px;
            padding:0px;
        }
        header{
            padding:1%;
            box-width:100%;
            height:30px;
            background:blue;
        }
        button{
            float: right;
            margin-right:2%;
            border-radius: 3px;
            position: relative;
        }
        button div{
            background-color: black;
            margin:2px;
            width:20px;
            height:5px;
            border-radius: 5px;
        }
        #relativeBtn{
            position: relative;
        }
        #absolutePanel{
            display: none;
            width:200px;
            height:150px;
            position: absolute;
            right: 0px;
            bottom: -180px;
            background-color: yellow;
        }
        </style>
    </head>
    <body>
        <header>
            <div id="relativeBtn">
            <button>
                <div></div>
                <div></div>
                <div></div>
            </button>
            <div id="absolutePanel">
                <h1>Guru Bhai</h1>
                <hr/>
                <p>Hello</p>
            </div>
            </div>
        </header>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $("#absolutePanel").slideToggle();
                });
            });
        </script>
    </body>
</html>

Answer 1

请参阅HTML部分。你可以这样做：

＆＃13;

* {
  margin: 0px;
  padding:0px;
}
header {
  padding:1%;
  box-width:100%;
  height:30px;
  background:blue;
}
button {
  float: right;
  margin-right:2%;
  border-radius: 3px;
  position: relative;
}
button div{
  background-color: black;
  margin:2px;
  width:20px;
  height:5px;
  border-radius: 5px;
}
#relativeBtn {
  position: relative;
}
#absolutePanel {
  display: none;
  width:200px;
  height:150px;
  position: absolute;
  right: 0px;
  bottom: -180px;
  background-color: yellow;
}

＆＃13;

<header>
  <div id="relativeBtn">
    <button>
      <div></div>
      <div></div>
      <div></div>
    </button>
  </div>
</header>
<div id="absolutePanel">
  <h1>Guru Bhai</h1>
  <hr/>
  <p>Hello</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("#absolutePanel").slideToggle();
    });
  });
</script>

＆＃13;

通知下拉菜单，如Facebook

1 个答案: