Как получить выпадающее меню, чтобы показать на Google Maps? - PullRequest
Новая
       12

Как получить выпадающее меню, чтобы показать на Google Maps?

0 голосов
/ 05 сентября 2018

Я пытаюсь получить меню в правом углу моего экрана, чтобы выпадающее меню Google Maps. Я могу заставить его выпадать, но он скрыт за картами Google.

Я искал и продолжаю находить сообщения о z-index, поэтому я предполагаю, что это как-то связано с этим, однако я не могу заставить его работать. Лучшее, что я смог сделать, - это открыть выпадающее меню, вроде прозрачное.

Если я изменяю z-индекс карты на -1, меню работает, но тогда я теряю функциональность карты. Я также могу изменить положение выпадающего меню на абсолютное и заставить его опускаться, но затем оно опускается вниз и влево, а это не то, что мне нужно.

Я не уверен, что я делаю неправильно. Любая помощь очень ценится.

Спасибо 

nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;
    
}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: block;
    
}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
	  width:100%;
    height:500px;
}
<!DOCTYPE html>
<html>

<head>
	<title>Fargo Food Trucks</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!-- Menu with dropdowns -->

<nav>
	<span>Fargo Food Trucks</span>
	<img src="images/badlogo.png" alt="">
	<ul>
		<li><a href="#">Menu</a>
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
		</li>
	</ul>
</nav>


<!-- map		-->
<div " id="map" >

<script>
	function startMap() {
		var location= {lat: 46.879603, lng: -96.787903};
    	var map=new google.maps.Map(document.getElementById("map"),{
    	zoom:13,
    	center: location
	});
    	var marker = new google.maps.Marker({
    		position: location,
    		map: map
    	});

}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjEzeWaDuillu5nCJnDug6ITpNiqt9I8Y&callback=startMap"></script>

</div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Вы можете просто добавить эту строку: 

nav ul {
  z-index: 1; /* To keep the menu on top of the map */
}

Всегда старайтесь держать ваш z-index как можно ниже.

Эта кодовая ручка показывает, как она выглядит после добавления этой строки, вы можете видеть, что теперь вы не потеряете ни одну из функций карты.

Итак, ваш CSS будет выглядеть так: 

nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
    z-index: 1; /* To keep the menu on top of the map */
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;

}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: block;

}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
      width:100%;
    height:500px;
}
0 голосов
/ 05 сентября 2018

Измените следующее для nav ul li: hover ul: 

display: block;
z-index: 1;

Первое правило позволяет дочерним элементам располагаться друг над другом, как при сложении блоков. Второе правило позволяет отображать элементы поверх всех остальных элементов, у которых z-индекс ниже.

Если вы хотите узнать больше о дисплее, перейдите по этой ссылке:

https://css -tricks.com / альманах / свойства / д / дисплей /

А если вы хотите узнать больше о z-index, то перейдите по этой ссылке:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

0 голосов
/ 05 сентября 2018

У селектора: nav ul li: hover ul 

nav ul li:hover ul{
    display: flex;
    position: absolute;
    z-index: 2000;
    top: 58px; 
}


nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;
    
}
nav ul li a.targetDrop{
    float: right;
}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: flex;
    position: absolute;
    z-index: 2000;
    top: 58px;
    
}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
	  width:100%;
    height:500px;
}
<!DOCTYPE html>
<html>

<head>
	<title>Fargo Food Trucks</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!-- Menu with dropdowns -->

<nav>
	<span>Fargo Food Trucks</span>
	<img src="images/badlogo.png" alt="">
	<ul>
		<li><a href="#" class="targetDrop">Menu</a>
		<ul>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
		</li>
	</ul>
</nav>


<!-- map		-->
<div " id="map" >

<script>
	function startMap() {
		var location= {lat: 46.879603, lng: -96.787903};
    	var map=new google.maps.Map(document.getElementById("map"),{
    	zoom:13,
    	center: location
	});
    	var marker = new google.maps.Marker({
    		position: location,
    		map: map
    	});

}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjEzeWaDuillu5nCJnDug6ITpNiqt9I8Y&callback=startMap"></script>

</div>
</body>
</html>
...