|
|
| (6 intermediate revisions not shown) |
| Line 17: |
Line 17: |
| | | | |
| | }} | | }} |
| - | <html>
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function()
| |
| - | {
| |
| - | //slides the element with class "menu_body" when mouse is over the paragraph
| |
| - | $("#secondpane p.menu_head").mouseover(function()
| |
| - | {
| |
| - | $(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
| |
| - | $(this).siblings();
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | $(function(){
| |
| - | //获取要定位元素距离浏览器顶部的距离
| |
| - | var navH = $(".modmenu").offset().top;
| |
| - | //滚动条事件
| |
| - | $(window).scroll(function(){
| |
| - | //获取滚动条的滑动距离
| |
| - | var scroH = $(this).scrollTop();
| |
| - | //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
| |
| - | if(scroH>=navH){
| |
| - | $(".modmenu").css({"position":"fixed","top":0,"margin":"5px","width":"170px";});
| |
| - | }else if(scroH<navH){
| |
| - | $(".modmenu").css({"position":"static","margin":"5px","width":"170px"});
| |
| - | }
| |
| - | console.log(scroH==navH);
| |
| - | })
| |
| - | })
| |
| - | </script>
| |
| - |
| |
| - | <style type="text/css">
| |
| - | .menu_list {
| |
| - | width: 170px;
| |
| - | margin:5px;
| |
| - | }
| |
| - | .menu_head {
| |
| - | padding: 5px 10px;
| |
| - | cursor: pointer;
| |
| - | position: relative;
| |
| - | border:1px solid #fff;
| |
| - | margin:1px;
| |
| - | font-weight:bold;
| |
| - | background: #ffbe10;
| |
| - | color:#fff
| |
| - | }
| |
| - | .menu_head:hover
| |
| - | {
| |
| - | cursor: pointer;
| |
| - | color: #fff;
| |
| - | background: #d39f10;
| |
| - | text-decoration: none;
| |
| - | background-position: 0 0;
| |
| - | }
| |
| - | .menu_body {
| |
| - | display:none;
| |
| - | }
| |
| - | .menu_children {
| |
| - | background: #aaa;
| |
| - | cursor: pointer;
| |
| - | padding: 5px 10px;
| |
| - | border-top: 1px solid #fff;
| |
| - | border-bottom: 1px solid #fff;
| |
| - | border-left: 1px solid #fff;
| |
| - | border-right: 1px solid #fff;
| |
| - | }
| |
| - | .menu_body a{
| |
| - | display:block;
| |
| - | color:#fff;
| |
| - | padding-left:10px;
| |
| - | font-weight:bold;
| |
| - | text-decoration:none;
| |
| - | }
| |
| - | .menu_children:hover{
| |
| - | cursor: pointer;
| |
| - | color: #fff;
| |
| - | text-decoration:none;
| |
| - | background:#777777;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - |
| |
| - | <div class="modmenu" style="float:left;">
| |
| - | <div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
| |
| - | <p class="menu_head">Header-1</p>
| |
| - | <div class="menu_body">
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-1</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-2</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-3</a>
| |
| - | </div>
| |
| - | </div>
| |
| - | <p class="menu_head">Header-2</p>
| |
| - | <div class="menu_body">
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-1</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-2</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-3</a>
| |
| - | </div>
| |
| - | </div>
| |
| - | <p class="menu_head">Header-3</p>
| |
| - | <div class="menu_body">
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-1</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-2</a>
| |
| - | </div>
| |
| - | <div class="menu_children">
| |
| - | <a href="#">Link-3</a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div> <!--Code for menu ends here-->
| |
| - | </div>
| |
| - | </html>
| |
| - | <div id="text-content">
| |
"
