Question

我目前在点击图标时打开一个下拉菜单，但我希望它现在可以水平打开，从网站延伸。单击汉堡菜单图标时，我希望它在图标右侧打开，单击帐户图标时，我希望菜单水平向左打开。

＆＃13;

// JavaScript Document
	$('.burger-menu').click(function(){
  $('.dropdown-content').toggleClass('show');
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.burger-menu').length) {
        if($('.dropdown-content').is(":visible")) {
            $('.dropdown-content').toggleClass('show');
        }
    }        
});

	$('.account').click(function(){
  $('.dropdown-content2').toggleClass('show');
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.account').length) {
        if($('.dropdown-content2').is(":visible")) {
            $('.dropdown-content2').toggleClass('show');
        }
    }        
});

＆＃13;

.logo {
	display: block;
	margin: auto;
	margin-top: -50px;
}
.account {
	display: block;
	margin-left: 1300px;
	margin-right: auto;
	margin-bottom: 160px;
	margin-top: -195px;
	cursor: pointer;
}

.burger-menu {
	display: block;
	margin-left: 107.5px;
	margin-right: auto;
	margin-bottom: 160px;
	margin-top: 50px;
	cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
	margin-left: 90px;
    min-width: 200px;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 30px 16px;
	text-align: left;
    text-decoration: none;
    display: block;
	font-size: 17px;
	font-family: futura, 'Futura Condensed Medium';
}

.dropdown-content a:hover {
	background-color: #000000;
	color: white;
}

.dropdown .dropdown-content.show {
    display: block;
}

.dropdown:hover .burger-menu {
    background-color: #000000;
}

.dropdown a:hover {
	font-size: 25px;
}

.show {
	display:block;
}

.dropdown2 {
    position: relative;
    display: inline-block;
}

.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #000000;
	margin-left: 1100px;
    min-width: 250px;
    z-index: 1;
}

.dropdown-content2 a {
    color: white;
    padding: 30px 17px;
	text-align: right;
    text-decoration: none;
    display: block;
	font-size: 17px;
	font-family: futura, 'Futura Condensed Medium';
}

.dropdown-content2 a:hover {
	background-color: #000000;
	color: white;
}

.dropdown2 .dropdown-content2.show {
    display: block;
}

.dropdown2:hover .account {
    background-color: #000000;
}

.dropdown2 a:hover {
	font-size: 25px;
}

.copyright {
	margin-top: 100px;
	margin-left: 1220px;
	font-size: 14px;
	font-family: futura, 'Futura Condensed Medium';
	color: white;
		
}

＆＃13;

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>PS</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	margin-left: 0px;
	margin-right: 0px;
	background-color: #000000;
}
</style>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<div class="dropdown">
  <input type="image" width="30" height="30" src="images/burger-menu(white).png" class="burger-menu" onmouseover="this.src='images/burger-menu-outline(white).png'" onmouseout="this.src='images/burger-menu(white).png'"/>
  <div class="dropdown-content">
    <a href="hoodies.html">HOODIES</a>
    <a href="shirts.html">SHIRTS</a>
    <a href="bottoms.html">BOTTOMS</a>
    <a href="accessories.html">ACCESSORIES</a>
  </div>
</div>
	<div class="dropdown2">
  <input type="image" width="30" height="30" src="images/account2(white).png" class="account" onmouseover="this.src='images/account-outline(white).png'" onmouseout="this.src='images/account(white).png'"/>
  <div class="dropdown-content2">
    <a href="#">LOGIN / SIGN UP</a>
    <a href="#">CART</a>
  </div>
</div>
	</nav>
	<a></a>
	<img class="logo" src="images/weblogo(white).png" width="700" height="400"/>
	<p class="copyright">© PUBLIC SERVANT 2017</p>

<script src="js/js.js"></script>
</body>
</html>

＆＃13;

如何使下拉菜单水平打开与图标一致（图标右侧）

0 个答案: