Question

我正在使用html，php和一点CSS的网站项目。对于项目，我使用Materialize。现在，我要创建我的起始页。为此，我想在一侧同时使用全屏滑块和导航栏。全屏滑块显示一些带有链接的图片。但是我也想在导航栏的顶部有一个下拉菜单。因此，您应该可以通过单击全屏滑块中的图片或使用导航栏中的下拉菜单来进入项目的其他站点。我测试了不同的CSS代码以及该站点的解决方案：

Materialize - Full screen slider and navigation bar

但是这些都没有用。当我这样做时，无法单击导航栏中的下拉菜单。双击仅标记滑块中的图片。但是我想将导航栏及其下拉菜单和滑块一起使用。应该同时点击两个元素，并且可以通过两个元素进入我项目的其他页面。

这是我的代码：

<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>

也许有人可以帮助我。

物化-在一个网站上使用全屏滑块和导航栏

0 个答案: