JS特效_靠边点击隐藏导航菜单资源-CSDN文库

共4个文件

gif：2个

html：1个

db：1个

导航菜单特效

导航菜单

4星 · 超过85%的资源需积分: 10 26 浏览量 2009-09-05 15:06:59 上传评论 1 收藏 11KB ZIP 举报

在网页设计中，JavaScript（JS）常常用于实现各种交互效果，增强用户体验。"JS特效_靠边点击隐藏导航菜单"就是一个典型的例子，它利用JS来创建一个动态的、响应用户点击的导航菜单，该菜单在页面边缘时可以隐藏或显示。这种特效能够使网站看起来更加专业且具有现代感，同时也能节省网页空间，特别是在移动设备上，能够提供更舒适的浏览体验。要实现这样的特效，我们需要理解HTML结构、CSS样式以及JavaScript事件处理。HTML将用于构建导航菜单的基本框架，CSS则用来进行布局和样式设置，使得菜单能够靠边隐藏，而JavaScript则是触发隐藏和显示行为的关键。在HTML部分，通常会有一个包含导航链接的`<nav>`元素或者一组`<ul>`和`<li>`元素，这些元素的初始样式可能已经通过CSS设置为隐藏或者定位在屏幕边缘。例如： ```html <nav id="side-menu"> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </nav> ``` 在CSS中，我们可以设定`#side-menu`的初始位置，比如将其设置为离屏幕左侧一定距离，并隐藏： ```css #side-menu { position: fixed; top: 0; left: -200px; /* 隐藏菜单的宽度 */ width: 200px; height: 100%; transition: all 0.3s ease; } ``` 然后，JavaScript将用于监听用户的点击事件。这里我们可以使用`addEventListener`方法来绑定点击事件到某个触发元素，比如一个按钮或整个屏幕边缘： ```javascript document.getElementById('open-menu').addEventListener('click', function() { var menu = document.getElementById('side-menu'); if (menu.style.left === '-200px') { menu.style.left = '0'; } else { menu.style.left = '-200px'; } }); ``` 在这个示例中，当用户点击`id`为`open-menu`的元素时，导航菜单将会在JavaScript的作用下向左滑动显示或隐藏。CSS的`transition`属性确保了平滑的动画效果。在提供的压缩包文件“cssplay实用css代码精选-靠边的隐藏菜单”中，可能包含了实现这一特效的具体代码示例。这个文件夹可能包括HTML、CSS和JS文件，你可以通过查看和学习这些代码来深入了解这个特效的实现过程。 "JS特效_靠边点击隐藏导航菜单"是一种常见的网页交互设计，结合了HTML、CSS和JavaScript三者的功能，通过点击触发菜单的隐藏与显示，增强了用户的交互体验。在实际的网页开发中，这样的特效可以灵活运用，适应不同的设计需求。

资源推荐

资源详情

资源评论

收起资源包目录

JS特效_靠边点击隐藏导航菜单.zip （4个子文件）

cssplay实用css代码精选-靠边的隐藏菜单

Thumbs.db 8KB

tab1.gif 1KB

index.html 6KB

fade.gif 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>drame.cnCSS+XHTML代码</title> </head> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_variations.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. 由drame(drame)http://www.drame.cn/ 整理来源于：http://www.cssplay.co.uk =================================================================== */ /* common styling */ /* Set up the default font and ovrall size to include image */ body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } .menu {position:absolute; z-index:100; margin-top:20px;} .menu ul {padding:0; margin:0; list-style-type: none; height:170px;} .menu ul li {width:35px; text-align:left;} * html .menu ul li {width:235px; margin-left:-16px; mar\gin-left:0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;} * html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w\idth:15px; he\ight:80px;} table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;} .menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;} .menu ul li:hover {position:relative;} .menu ul li:hover a {padding-left:200px;} .menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; z-index:300;} .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w\idth:180px;} .menu ul li:hover ul li a.last, .menu ul li a:hover ul li a.last {border-bottom:1px solid #000;} .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;} .some_text {padding:0 20px 0 50px;} </style> <body> <div class="menu"> <ul> <li><a href="../menu/index.html">D E M O S</a> <table><tr><td> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a class="last" href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> </td></tr></table>  </li> <li><a href="index.html">B O X E S</a> <table><tr><td> <ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a class="last" href="circles.html" title="circular links">circular links</a></li> </ul> </td></tr></table>  </li> </ul> </div> <div class="some_text"> <p>A little bit of text to show the menu will fly out over the page.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html>

评论收藏

内容反馈