htmlcss非常牛的左侧栏JS折叠菜单资源-CSDN文库

共63个文件

png：23个

gif：18个

html：16个

html

非常牛的左侧栏JS折叠菜单

5星 · 超过95%的资源需积分: 4 58 浏览量 2010-02-11 13:43:54 上传评论 4 收藏 77KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

NavBar-2.7.rar （63个子文件）

codefans.net

NavBar-2.7

overview.html 3KB

setupmenu.js 5KB

doc-icons.html 5KB

install.html 10KB

doc-prefs.html 5KB

customize.html 10KB

doc-animation.html 6KB

doc-create.html 24KB

license.html 3KB

support.html 3KB

style-floating.css 3KB

navbar

themes

winxp

blank.gif 43B

skin.css 2KB

arrow-down.png 794B

sec-title.gif 3KB

arrow-up.png 780B

sec-title-hilite.gif 4KB

sep.png 425B

icons

blank.gif 43B

arrow-left.png 295B

arrow-right.png 300B

minus.png 293B

arrow-down.png 297B

sticky-off.png 311B

plus.png 282B

arrow-up.png 291B

sync.png 321B

sticky.png 350B

navbar.jss 21KB

navbar.css 3KB

doc-files.html 10KB

images

bullet.png 860B

bullet-large.png 5KB

doc-skins.html 9KB

samples

sec3-closed.gif 174B

custom_icons

blank.gif 43B

arrow-left.png 266B

arrow-right.png 279B

minus.png 254B

arrow-down.png 276B

sticky-off.png 276B

plus.png 262B

arrow-up.png 270B

sync.png 292B

sticky.png 317B

sec3.gif 176B

navbar.gif 146B

sec2-closed.gif 203B

db.gif 605B

sec4.gif 172B

chat.gif 1KB

show.html 3KB

icons.html 3KB

sec1.gif 198B

sec2.gif 201B

dynarch.gif 372B

advanced.html 8KB

sec4-closed.gif 172B

winxp.html 7KB

hmenu.gif 659B

sec1-closed.gif 196B

index.html 7KB

style.css 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px; margin: 0px"> <head> <title>Dynarch DHTML/JavaScript Navigation Bar (Create the NavBar)</title>  <script type="text/javascript" src="navbar/navbar.jss"></script> <script type="text/javascript"> _NavBar_pageID = "Create the NavBar"; /* disable the current page from the menu */ </script> <style type="text/css"> /* import the navigation bar styles */ @import url(navbar/navbar.css); /* your own styles go here */ @import url(style.css); h1 { margin: 0px; } </style> </head> <body>  <div id="beforemenu"> (c) Dynarch.com 2003-2005. All Rights Reserved. </div>  <div id="aftermenu" style="margin: 0 10px"> NavBar is designed and implemented by <a href="http://dynarch.com/mishoo/">mishoo</a> with the same dedication and care for details that he has put in <a href="http://www.dynarch.com/products/">all his</a> <a href="http://www.dynarch.com/projects/">projects</a>. </div>  <div id="content"> <div id="page-content"> <div id="panel"> Preferences <input type="checkbox" name="autohide" id="autohide" onclick="menu.setPref('auto-hide', this.checked);" /> <label for="autohide" title="If checked then the menubar will show/hide automatically">auto-hide</label> <input type="checkbox" name="monosection" id="monosection" onclick="menu.setPref('mono-section', this.checked);" /> <label for="monosection" title="If checked then only one section at a time will be visible">mono-section</label> <input type="checkbox" name="tooltips" id="tooltips" onclick="menu.setPref('tooltips', this.checked); alert('You have to reload the page in order for the changes to take effect');" /> <label for="tooltips" title="If checked the menu will display tooltips">tooltips</label> <label for="animation">animation:</label> <select name="animation" id="animation" onchange="menu.setPref('animation', this.value);"> <option value="0">None</option> <option value="1">Section</option> <option value="2">NavBar</option> <option value="3">Page (bloat)</option> </select> </div> <h1>Creating the NavBar</h1> This page discusses the scripts that create the NavBar in more detail than our “<a href="install.html">quick start install guide</a>”. First off, we will start from the HTML layout that your page should have. The very basic but strong requirement is that all pages using NavBar should declare a “strict doctype”, that is, they should start for instance with the following string: <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></pre> This informs the browser that it should render the page in the “standards compliant” mode. If you do not include the DOCTYPE, in new browsers (Mozilla, Firefox, Opera 7, Safari, Konqueror) the only downside will be that the fonts in the menu might look bigger than you'd expect. This can be easily fixed by writing direct font specification for NavBar elements in the CSS file. However, in old browsers (Internet Explorer 6) the NavBar layout will look completely broken and this can't be easily fixed. So for your own sake, please do include the DOCTYPE declaration. We do not support situations where the DOCTYPE is missing. Contrary to popular beliefs, NavBar requires a DIV-based layout instead of a TABLE-based one. Your page content must be embedded in a DIV element whose ID you need to pass to the NavBar constructor, and our menu will take care of creating a navigation bar for that DIV, so to say. In the HEAD section of your HTML, you should load the files as described in <a href="doc-files.html">the previous</a> section, and just right before ending the BODY tag (before </body>)--or, even better, upon the <tt>onload</tt> event for the BODY tag--you should call a script that configures the NavBar. Don't worry, we discuss all steps here. <h2>The HTML document</h2> <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head>  <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>Your page title</title>  <script type="text/javascript"> _NavBar_url = "/navbar/"; </script>  <script type="text/javascript" src="/navbar/navbar.jss"></script>  <link rel="stylesheet" media="all" src="/navbar/navbar.css" /> </head> <body> <div id="content"<span

评论收藏

内容反馈