Я работаю над сайтом-проектом с html, php и немного css.Для проекта я использую Materialise.Теперь я хочу создать мою стартовую страницу.Для этого я хочу использовать полноэкранный слайдер и навигационную панель вместе на одной стороне.Полноэкранный слайдер показывает несколько картинок со ссылками.Но я также хочу иметь панель навигации вверху с выпадающим меню.Таким образом, вы сможете войти на другие сайты моего проекта, нажав на картинку в полноэкранном слайдере или используя выпадающий список на панели навигации.Я тестировал различные css-коды, а также решение с этого сайта:
Материализация - Полноэкранный слайдер и панель навигации
Но ничего из этого не сработало.Когда я делаю так, раскрывающееся меню на панели навигации невозможно щелкнуть.При двойном щелчке отмечается только картинка в слайдере.Но я хочу использовать панель навигации вместе с ее выпадающим меню и ползунком.Оба элемента должны быть нажаты, и другие страницы моего проекта могут быть введены через оба элемента.
Вот мой код:
<html>
<header>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Welcome</title>
</header>
<body>
<center>
<?php
session_start();
?>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="1.php">1</a></li>
<li class="divider"></li>
<li><a href="2.php">2</a></li>
<li class="divider"></li>
<li><a href="3.php">3</a></li>
</ul>
<nav class="green">
<div class="nav-wrapper">
<img id="logo" src= "LOGO.png" class="brand-logo right" width ="125"
height="58">
<a href="#" class="brand-logo center">Welcome</a>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Select<i
class="material-icons right">arrow_drop_down</i></a></li>
</div>
</nav>
<script>
$(document).ready(function()
{
$(".dropdown-trigger").dropdown();
}
);
</script>
<style>
.main-content
{
position: relative;
top: 63px;
z-fixed: 1000 !important;
}
</style>
<div class="slider fullscreen">
<div class="main-content">
<ul class="slides">
<li>
<img src="/img/IMG1.png">
</li>
<li>
<a href="OPTION2.php"><img src="/img/IMG2.png">
</a>
</div>
</div>
<script>
$(document).ready(function () {
$('.slider').slider({full_width: true, height:1000, interval: 8000});
});
</script>
<script>
var instance = M.Slider.getInstance(elem);
instance.start();
</script>
</center>
</body>
</html>
Может быть, кто-то из вас может мне помочь.