<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jElevator jQuery导航插件 - 网页模板</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jelevator.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jelevator-1.0.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$("h1, h2, h3, h4, h5").jElevator({
showTopButton: true,
showBottomButton: true,
showSectionsMenu: true
});
});
</script>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="content">
<div class="demo-description">
<h1>Demo #1 — Menu Generator + Scroll Top & Bottom Buttons</h1>
<p>This demo shows how the jElevator jQuery Plugin works. In the
sample content below, you'll see when a user moves the mouse to
the left side of the screen a tiny panel appears which contains
the automatically generated menu, scroll-to-top button, and
scroll-to-bottom button. A great feature of the jElevator script
is that it can build an outline (or table of contents) based
on the tags you provide to it. For example, in this demo we used
all heading tags to generate the outline (h1, h2, ... h5).
To see the outline, move the mouse to the left side of the page
and click the center button to display the outline menu. There
are three buttons total (scroll top, scroll bottom, sections
menu). Per your preference, you can select to show one, two,
or all three.</p>
<p><strong>To add this functionality to your page just add:</strong></p>
<pre>
jQuery(function($){
$("h1, h2, h3, h4, h5").jElevator({
showTopButton: true,
showBottomButton: true,
showSectionsMenu: true
});
});
</pre>
</div>
<hr>
<h2>Cras Mattis Consectetur</h2>
<p class="preface">Aenean eu leo quam. Pellentesque ornare sem
lacinia quam venenatis vestibulum. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros. Curabitur blandit tempus
porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
<div class="column-l">
<p>Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec ullamcorper nulla non metus auctor
fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros. Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor. Integer posuere erat a ante venenatis
dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum. Cras mattis
consectetur purus sit amet fermentum.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis
euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros. Nulla vitae elit libero, a pharetra augue. Cras mattis
consectetur purus sit amet fermentum. Vestibulum id ligula porta
felis euismod semper.</p>
</div>
<div class="column-r">
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare
vel eu leo. Maecenas sed diam eget risus varius blandit sit amet
non magna. Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Sed posuere consectetur est at lobortis. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Duis mollis, est non
commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Aenean lacinia bibendum nulla
sed consectetur. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
<div class="clear"></div>
<h2>Justo Venenatis Vulputate</h2>
<div class="box-1"></div>
<p>Donec id elit non mi porta gravida at eget metus. Donec
ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget
risus varius blandit sit amet non magna. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam
id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id
elit non mi porta gravida at eget metus. Donec id elit non mi porta
gravida at eget metus. Donec ullamcorper nulla non metus auctor
fringilla. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et.</p>
<div class="clear"></div>
<h2>Egestas Eget Quam</h2>
<p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor
id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla
sed consectetur. Sed posuere consectetur est at lobortis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante venenatis dapibus posuere velit aliquet. Donec
ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor
id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus
porttitor. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem
malesuada magna mollis euismod.</p>
<hr>
<h1>Vehicula Aenean Dapibus Commodo Pharetra</h1>
<p class="preface">Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit. Aenean
lacinia bibendum nulla sed consectetur.</p>
<div class="column-l">
<p>Donec ullamcorper nulla non metus auctor fringilla. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Nulla vitae elit libero, a
pharetra augue. Etiam porta sem malesuada magna mollis euismod.
Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
posuere consectetur est at lobortis. Nullam id dolor id nibh
ultricies vehicula ut id elit. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet. Vestibulum id ligula
porta felis euismod semper. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Nullam quis risus eget urna
mollis ornare vel eu leo.</p>
</div>
<div class="column-r">
<p>Donec ullamcorper nulla non metus auctor fringilla. Sed
posuere consectetur est at lobortis. Etiam porta sem malesuada
magna mollis euismod. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.</p>
jElevator jQuery导航插件.zip
版权申诉
46 浏览量
2022-11-19
19:46:25
上传
评论
收藏 41KB ZIP 举报
jElevator jQuery导航插件.zip （6个子文件） 
jElevator jQuery导航插件 jiaoben1362 css 
jelevator.css 3KB demo.css 1KB images 
icons.png 2KB
index.html 11KB js jquery-1.10.2.min.js 91KB jquery-jelevator-1.0.2.min.js 4KB资源评论
