第2章用HTML设置文本和图像_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
90页免费65页免费113页免费32页免费39页免费25页免费42页免费5页免费5页免费
第2章用HTML设置文本和图像|H​T​M​L​设​置​文​本​和​图​像
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：2.65MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> JS打造可折叠展开的导航菜单（Slashdot Menu）
JS打造可折叠展开的导航菜单（Slashdot Menu）
分类：&&&时间：&&&点击：&&&关键词：||||
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&JS打造可折叠展开的导航菜单（Slashdot Menu） - &/title&
&style type=&text/css&&
div.sdmenu {
width: 150
font-family: Arial, sans-
font-size: 12
padding-bottom: 10
background: url(/images//bottom.gif) no-
div.sdmenu div {
background: url(/images//title.gif) repeat-x;
div.sdmenu div:first-child {
background: url(/images//toptitle.gif) no-
div.sdmenu div.collapsed {
height: 25
div.sdmenu div span {
padding: 5px 25
font-weight:
background: url(/images//expanded.gif) no-repeat 10
border-bottom: 1px solid #
div.sdmenu div.collapsed span {
background-image: url(/images//collapsed.gif);
div.sdmenu div a {
padding: 5px 10
background: #
border-bottom: 1px solid #
color: #066;
div.sdmenu div a.current {
background : #
div.sdmenu div a:hover {
background : #066 url(/images//linkarrow.gif) no-
text-decoration:
&script type=&text/javascript&&
function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName(&div&);
this.remember =
this.speed = 3;
this.markCurrent =
this.oneSmOnly =
SDMenu.prototype.init = function() {
var mainInstance =
for (var i = 0; i & this.submenus. i++)
this.submenus[i].getElementsByTagName(&span&)[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
if (this.markCurrent) {
var links = this.menu.getElementsByTagName(&a&);
for (var i = 0; i & links. i++)
if (links[i].href == document.location.href) {
links[i].className = &current&;
if (this.remember) {
var regex = new RegExp(&sdmenu_& + encodeURIComponent(this.menu.id) + &=([01]+)&);
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split(&&);
for (var i = 0; i & states. i++)
this.submenus[i].className = (states[i] == 0 ? &collapsed& : &&);
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == &collapsed&)
this.expandMenu(submenu);
this.collapseMenu(submenu);
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName(&span&)[0].offsetH
var links = submenu.getElementsByTagName(&a&);
for (var i = 0; i & links. i++)
fullHeight += links[i].offsetH
var moveBy = Math.round(this.speed * links.length);
var mainInstance =
var intId = setInterval(function() {
var curHeight = submenu.offsetH
var newHeight = curHeight + moveBy;
if (newHeight & fullHeight)
submenu.style.height = newHeight + &px&;
clearInterval(intId);
submenu.style.height = &&;
submenu.className = &&;
mainInstance.memorize();
this.collapseOthers(submenu);
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName(&span&)[0].offsetH
var moveBy = Math.round(this.speed * submenu.getElementsByTagName(&a&).length);
var mainInstance =
var intId = setInterval(function() {
var curHeight = submenu.offsetH
var newHeight = curHeight - moveBy;
if (newHeight & minHeight)
submenu.style.height = newHeight + &px&;
clearInterval(intId);
submenu.style.height = &&;
submenu.className = &collapsed&;
mainInstance.memorize();
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i & this.submenus. i++)
if (this.submenus[i] != submenu && this.submenus[i].className != &collapsed&)
this.collapseMenu(this.submenus[i]);
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmO
this.oneSmOnly =
for (var i = 0; i & this.submenus. i++)
if (this.submenus[i].className == &collapsed&)
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmO
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i & this.submenus. i++)
if (this.submenus[i].className != &collapsed&)
this.collapseMenu(this.submenus[i]);
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i & this.submenus. i++)
states.push(this.submenus[i].className == &collapsed& ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = &sdmenu_& + encodeURIComponent(this.menu.id) + &=& + states.join(&&) + &; expires=& + d.toGMTString() + &; path=/&;
&script type=&text/javascript&&
// &![CDATA[
window.onload = function() {
myMenu = new SDMenu(&my_menu&);
myMenu.init();
&form action=&#& style=&font-family: sans- font-size: .8em& onsubmit=&return false&&
&fieldset&&legend&Menu actions&/legend&
&label for=&speed&&Speed (1-5):&/label&
&input type=&text& id=&speed& value=&3& size=&1& onchange=&myMenu.speed = parseInt(this.value)& /&
&label for=&oneSmOnly&&One submenu at a time:&/label&
&select id=&oneSmOnly& onchange=&myMenu.oneSmOnly = this.selectedIndex&&&option&false&/option&&option&true&/option&&/select&
&select name=&smNr&&&option&1&/option&&option&2&/option&&option&3&/option&&option&4&/option&&/select&
&input type=&button& value=&Expand& onclick=&myMenu.expandMenu(myMenu.submenus[smNr.selectedIndex])& /&
&input type=&button& value=&Collapse& onclick=&myMenu.collapseMenu(myMenu.submenus[smNr.selectedIndex])& /&
&input type=&button& value=&Toggle& onclick=&myMenu.toggleMenu(myMenu.submenus[smNr.selectedIndex])& /&
&input type=&button& value=&Expand all& onclick=&myMenu.expandAll()& /&
&input type=&button& value=&Collapse all& onclick=&myMenu.collapseAll()& /&
&/fieldset&
&div style=&float: left& id=&my_menu& class=&sdmenu&&
&span&Online Tools&/span&
&a href=&/imageoptimizer/&&Image Optimizer&/a&
&a href=&/favicon/&&FavIcon Generator&/a&
&a href=&/emailriddler/&&Email Riddler&/a&
&a href=&/password/&&htaccess Password&/a&
&a href=&/gradient/&&Gradient Image&/a&
&a href=&/button/&&Button Maker&/a&
&span&Support Us&/span&
&a href=&/recommendit/&&Recommend Us&/a&
&a href=&/link.htm&&Link to Us&/a&
&a href=&/resources/&&Web Resources&/a&
&div class=&collapsed&&
&span&Partners&/span&
&a href=&&&JavaScript Kit&/a&
&a href=&&&CSS Drive&/a&
&a href=&&&CodingForums&/a&
&a href=&/style/&&CSS Examples&/a&
&span&Test Current&/span&
&a href=&?foo=bar&&Current or not&/a&
&a href=&./&&Current or not&/a&
&a href=&index.html&&Current or not&/a&
&a href=&index.html?query&&Current or not&/a&
&div style=&padding-left: 200px&&
var myMenu = new SDMenu(&main_menu&); // ID of the menu element
// Default values...
myMenu.speed = 3;
// Menu sliding speed (1 - 5 recomended)
myMenu.remember =
// Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly =
// One expanded submenu at a time
myMenu.markCurrent =
// Mark current link / page (link.href == location.href)
myMenu.init();
// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);
// Expand a submenu
myMenu.collapseMenu(firstSubmenu);
// Collapse a menu
myMenu.toggleMenu(firstSubmenu);
// Expand if collapsed and collapse if expanded
myMenu.expandAll();
// Expand all submenus
myMenu.collapseAll();
// Collapse all submenus
&p&&a href=&&&网页代码站&/a& - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！&/p&
JS打造可折叠展开的导航菜单（Slashdot Menu）。Slashdot Menu 是从Slashdot 上发现的一个别具特色的可折叠式效果的导航菜单，可使用不同的方式配置，如哪些子菜单默认情况下是展开的，是否使用Cookies ，以及菜单展开、折叠的速度等。非常酷！
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！css3 transition,前端开发,前端设计,web前端,WEB前端,CSS3效果,CSS3特效,CSS3 demo,html5 demo,CSS3,html5效果,html5特效,CSS3测试,html5测试,html5 css3在线演示, html5, css3, html5 教程,css, jquery, javascript, div+css模板, css模板, css教程, div css, css hack, JS, html5 开发工具, html5, css3, css3 圆角, css3教程, css3手册, css3 动画 , css3 渐变, css3 阴影, css3 transform, css3 旋转, html5 canvas, html5 video, html5 3d, android html5, html5测试
Q 群：（8群）还没有任何记录...
HTML+CSS竖向折叠点击展开的两级菜单导航
来源：懒人建站作者：懒人建站懒人建站日期： 23:52人气:次
HTML+CSS结构的竖向折叠菜单，点击展开二级菜单，结构为HTML+CSS结构，清晰明了，易修改。
废话少说上结构：
结构的竖向，点击展开，结构为结构，清晰明了，易修改。
废话少说上结构：
&div id=&my_menu& class=&sdmenu&&
&&&&& &div&
&&&&&&& &span&&/span&
&&&&&&& &a href=&&/a&
&&&&&&& &a href=&&&焦点图片&/a&
&&&&&&& &a href=&广告代码&/a&
&&&&&&& &a href=&&&JS&/a&
&&&&& &/div&
&&&&& &div&
&&&&&&& &span&欣赏借鉴&/span&
&&&&&&& &a href=&&&企业类网站&/a&
&&&&&&& &a href=&&&博客类网站&/a&
&&&&&&& &a href=&&&商城类网站&/a&
&&&&& &/div&
&&&&& &div&
&&&&&&& &span&建站技巧&/span&
&&&&&&& &a href=&技巧&/a&
&&&&&&& &a href=&技巧&/a&
&&&&&&& &a href=&技巧&/a&
&&&&&& &/div&
&&&&&& &div&
&&&&&&& &span&&/span&
&&&&&&& &a href=&模板&/a&
&&&&&&& &a href=&优化&/a&
&&&&&& &/div&
&&& &/div&
HTML+CSS竖向折叠点击展开的两级菜单导航-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
导航菜单-推荐
导航菜单-人气榜
懒人建站为您提供-基于jquery特效，jquery弹出层效果，导航菜单代码，下拉菜单代码和jquery焦点图片代码，懒人建站关注软件界面设计，WEB/后台/手机/软件UI设计、建站素材、html5和CSS3新技术等。如果您关闭了浏览器的JavaScript，会导致页面部分功能无法显示，请开启JavaScript以便正常浏览本网页。网页代码站()谢谢您的支持！
||||||||||||||【】
代码排行榜
网页特效代码RSS
|||||||||||
问答排行榜
共有问题数：128423
共有回答数：141
已解决问题：33
待解决问题：128390
帖子排行榜
美文排行榜
站长实用工具
生活实用工具
网页代码站意见/反馈/留言/广告/程序定制 唯一客服邮箱： [#替换成@]
郑重声明：未经授权禁止转载、摘编、复制或建立镜像。如有违反，追究法律责任。
Copyright & 2009-
Corporation, All Rights Reserved
法律顾问：邵卉芳律师 技术支持：