服务器之家
您的位置： 首页 编程语言 css

「原创」简易滑动栏目（Jquery版与纯CSS版）

100人浏览   2024-09-14 10:03:39

一、Jquery版本

<script>

$(document).ready(function(){

$("menu ul").hide();

$("menu nav").click(function(){

var index=$("menu nav").index(this);

$("menu ul:eq("+index+")").slideToggle();

});

})

</script>

<style>

*{margin:0;padding:0;list-style:none;}

.mymenu{font-size: 2em;line-height: 2em;cursor:pointer;}

.mymenu nav{width: 100%;background: #fff000;}

.mymenu ul li{width: 100%;background: #f4f4f4; transition: 1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}

.mymenu ul li:hover{background: #ccc;}

</style>

<menu class="mymenu">

<nav>一级栏目1</nav>

<ul>

<li>二级栏目1</li>

<li>二级栏目2</li>

<li>二级栏目3</li>

<li>二级栏目4</li>

</ul>

<nav >一级栏目2</nav>

<ul>

<li>二级栏目5</li>

<li>二级栏目6</li>

<li>二级栏目7</li>

<li>二级栏目8</li>

<li>二级栏目7</li>

<li>二级栏目8</li>

</ul>

<nav>一级栏目3</nav>

<ul>

<li>二级栏目53</li>

<li>二级栏目63</li>

<li>二级栏目73</li>

<li>二级栏目83</li>

</ul>

</menu>

二、纯CSS版本

<style>

*{padding:0;margin:0;}

html,body{font-size:1em;}

.mymenu{font-size:2em;line-height:2em;list-style:none;cursor:pointer;}

.mymenu li{width:100%;background:#fff000;outline:none;}

.mymenu li nav{height:0;width:100%;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}

.mymenu li nav li{display:none;width:100%;background:#f4f4f4;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}

.mymenu li:focus nav{height:8em;}

.mymenu li:focus nav li{display: block;}

.mymenu li:focus nav li:hover{background: #ccc;}

</style>

<menu class="mymenu">

<li tabindex='1'>一级栏目1

<nav>

<li>二级栏目1</li>

<li>二级栏目2</li>

<li>二级栏目3</li>

<li>二级栏目4</li>

</nav>

</li>

<li tabindex='2'>一级栏目2

<nav>

<li>二级栏目5</li>

<li>二级栏目6</li>

<li>二级栏目7</li>

<li>二级栏目8</li>

</nav>

</li>

<li tabindex='3'>一级栏目3

<nav>

<li>二级栏目53</li>

<li>二级栏目63</li>

<li>二级栏目73</li>

<li>二级栏目83</li>

</nav>

</li>

</menu>



相关推荐