Question

所以我正在使用CSS3全屏幻灯片，感谢这个人here，我想把导航放在它上面。但是当我这样做时，它随着幻灯片放映而消失。

如何更改代码以使其不与后台交互？这样导航是静态的，而不是与全屏幻灯片交互？我有一个例子here。

NAV的HTML

          <div class="nav">
        <nnedi>Nnedimma</nnedi><br><nnedi>Ugochukwu</nnedi>
        <ul class="nav cl-effect-1">
            <li><a href="#">Home</a></li>
            <li><a href="china.html" target="content">China</a></li>
            <li><a href="light.html" target="content">Light</a></li>
            <li><a href="travel.html" target="content">Travel</a></li>
            <li><a href="#" target="content">Cyanotypes</a></li>
            <li><a href="#" target="content">Self</a></li>
            <li><a href="#" target="content">School</a></li>
            <li><a href="#" target="content">Vector Portraits</a></li>
            <li><a href="#" target="content">About</a></li>
        </ul>

Answer 1

在Modernizr函数中找到以下行并删除

nav|"e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video

Answer 2

检查

 <body>
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>

<div class="nav">
<nnedi>Stacy<br/>Cool</nnedi>
<ul class="nav cl-effect-1">
  <li><a href="#">Home</a></li>
  <li><a href="china.html" target="content">China</a></li>
  <li><a href="light.html" target="content">Light</a></li>
  <li><a href="travel.html" target="content">Travel</a></li>
  <li><a href="#" target="content">Cyanotypes</a></li>
  <li><a href="#" target="content">Self</a></li>
  <li><a href="#" target="content">School</a></li>
  <li><a href="#" target="content">Vector Portraits</a></li>
  <li><a href="#" target="content">About</a></li>
</ul>
</div>

</body>

https://jsfiddle.net/durga598/2oyrgtgf/8/

具有静态导航功能的CSS3全屏幻灯片

2 个答案: