Question

以下是我到目前为止的代码。目前，注册和加入链接位于左上角。我希望这些都在下拉菜单中。所以在左上方我想要一个下拉菜单，当我将鼠标悬停在菜单上时，这两个链接出现在那里，当我点击它们时，屏幕中间会出现相同的弹出窗口。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Clipmarks - Online Bookmark Application</title>
  <meta name="description" content="An online collection of all your bookmarks.">
  <meta name="author" content="Tonye Bezalel Brown">
  <link rel="icon" 
        type="image/png" 
        href="images/clipmarks-favicon.png">

    <style type="text/css">
        body { 
            margin:0;
            font-family: Arial, sans-serif;
            font-size: 11pt;
        }

        a:link, a:visited {
            font-family: Arial, sans-serif, verdana;
            text-decoration: none;
            letter-spacing:1px;
            font-weight: bold;
            color: #686777;
            font-size: 11pt;
        }

        a:hover {
            color: #006cff;
        }

        .content {
            margin: 0 auto;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .header {
            height: 49px;
            margin: 0 auto;
            padding: 50px 50px 30px;
            max-width: 900px;
        }

        #header-img-wrap {
            min-width:42px;
            margin: auto auto 2px -30px;
        }

        #header-img-wrap a span {
            font-size: 14pt;
            font-family: Arial;
            font-weight: 650;
            position: absolute;
            padding: 7px;
            margin-top: -3px;
            vertical-align: inherit;
        }   

        .header a img {
            width: 29px;
            height: auto;
        }

        .header-links {
            text-align: right;
            margin-top: -28px;
            margin-right: -50px;
            width: 116px;
            float: right;
        }



        .header li {
            display: inline-block;
            list-style-type: none;
            padding-right: 8px;
        }

        #box {
            width: 99.9%;
            border: 1px #000 solid;
            position: absolute;
            height: 60%;
            overflow: hidden;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        #box:hover {
            background:rgba(0, 108, 255, 0.42);
        }

        #boximg {
            width: 630px; 
            height: 140px; 
            position: absolute; 
            right: 200px;
        }

        .footer {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 35px;
        }

        #overlay {
            display: none;
            position:absolute;
            top:0;
            width:100%;
            height:100%;
            background: rgba(0,0,0,0.63);
            z-index:15;
        }

        #login, #signup {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 10000;
            max-width: 26em;
            height: 199px;
            padding: 28px 22px;
            border: 4px solid rgb(197, 218, 255);
            background: white;
        }

        #recoverPassword {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 10000;
            max-width: 26em;
            height: 149px;
            padding: 28px 22px;
            border: 4px solid rgb(197, 218, 255);
            background: white;
        }

        form input {
            display: block;
            border: 0 solid black;
            width: 100%;
            height: 32px;
            margin: 0 auto;
            margin-bottom: -14px;
            background: aliceblue;

        }

        form p {
            margin-top: 0;
        }

        form a{
            display: block;
            float: left;
            position: relative;
            vertical-align: bottom;
            width: 112px;
            font-size: 12px !important;
            word-break: break-word;
        }

        #formButton {
            background: transparent;
            margin-right: -7px;
            display: inline;
            width: 61px;
            float: right;
            margin-top: -8px;
            word-break: break-word;
            font-weight: bold;
            color: #7A7A7A;
        }

        #formButton:hover {
            color:#000;
        }

    </style>




</head>


<body onload="move()">
    <div id="overlay" onclick="closeOverlay()">
    </div>
        <div id="login">
            <form action="main.html" method="get" autocomplete="on">
                <input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
                <input type="password" name="password"><br /><p>Password</p>
                <br /><br /><br />
                <a href="#" onclick="recoverPassword()">Forgot Password</a>
                <input id="formButton" type="submit" value="Sign In">
            </form>
        </div>

        <div id="signup">
            <form action="main.html" method="get" autocomplete="on">
                <input type="text" name="username" autofocus><br /><p>Your email address</p>
                <input type="password" name="password"><br /><p>Password</p>
                <br /><br /><br />
                <input id="formButton" type="submit" value="Join">
            </form>
        </div>

        <div id="recoverPassword">
            <form action="index.html" method="get">
                <input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
                <br /><br /><br /><br />
                <input id="formButton" type="submit">
            </form>
        </div>

    <div class="content">

        <div class="header">
            <div id="header-img-wrap">
                <a href="index.html"><img src="images/clipmarks-favicon.png" height="" alt="" title="" /><span>ClipMarks<span></a>
            </div>
        <div class="header-links">
            <li><a href="#" onclick="signin()">Sign In</a></li>
            <li><a href="#" onclick="join()">Join</a></li>
        </div>

        </div>

        <div id="box">
            <img id="boximg" src="images/box-image.jpg" width=""  height="" alt="" title="" />
        </div>

        <div class="footer">
            <a href="http://cs.tru.ca">About Us</a>
        </div> 
    </div>


    <script>
          window.onload = function move() { //makes the box move in relation to the box div
              var d = document.getElementById('boximg');
              var boxh = document.getElementById('box').clientHeight - 120; //keeps the image in the box by subtracting height
              var boxw = document.getElementById('box').clientWidth - 600; //keeps the image in the box by subtracting the width

              document.onmousemove = function calc(e) {
                var x = e.clientX ;
                var y = e.clientY;

                if (x < boxw) {
                    d.style.right = x +'px';
                }

                if (y < boxh) {
                    d.style.bottom = y +'px';
                }

              };
          };


          function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
            var ov = document.getElementById('overlay');
            var rp = document.getElementById('recoverPassword');
            var lg = document.getElementById('login');
            var sg = document.getElementById('signup');

            ov.style.display = 'none';
            rp.style.display = 'none';
            lg.style.display = 'none';
            sg.style.display = 'none';
          };



          document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
            evt = evt || window.event;
            if (evt.keyCode == 27) {
                closeOverlay();
            }
          };

          function signin() { //displays the sign in form
            var lg = document.getElementById('login');
            var ov = document.getElementById('overlay');
            ov.style.display = 'block';
            lg.style.display = 'block';


          };

          function recoverPassword() { //displays the recoverPassword form for the user to recover password
            closeOverlay(); 
            var ov = document.getElementById('overlay');
            ov.style.display = 'block';

            var rp = document.getElementById('recoverPassword');
            rp.style.display = 'block';
          };

          function join() { //calls the join form for users to register
            var lg = document.getElementById('signup');
            var ov = document.getElementById('overlay');
            ov.style.display = 'block';
            lg.style.display = 'block';
          };


    </script>
</body>

</html>

Answer 1

这应该相当容易。用这个替换header-links div中的代码。 HTML：

<ul>
    <li><a href="#">Dropdown</a>
        <ul>
            <li><a href="#" onclick="signin()">Sign In</a></li>
            <li><a href="#" onclick="join()">Join</a></li>
        </ul>
    </li>
</ul>

并将其添加到您的css类

CSS：

ul ul {
    display: none;
}

ul li:hover > ul {
    display: block;
}

我还建议您删除.header-links课程中的负边距，并将float:left添加到#header-img-wrap。

希望有所帮助。

我想创建一个弹出框。应该使用下拉菜单访问它

1 个答案: