|
|
| Line 17: |
Line 17: |
| | | | |
| | }} | | }} |
| - | <html>
| |
| - | <head>
| |
| - | <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 getScrollTop() {
| |
| - | var scrollPos;
| |
| - | if (window.pageYOffset) {
| |
| - | scrollPos = window.pageYOffset;
| |
| - | }
| |
| - | else if (document.compatMode && document.compatMode != 'BackCompat') {
| |
| - | scrollPos = document.documentElement.scrollTop;
| |
| - | }
| |
| - | else if (document.body) {
| |
| - | scrollPos = document.body.scrollTop;
| |
| - | }
| |
| - | if(scrollPos < 200){
| |
| - | document.getElementById("secondpane").className=" ";
| |
| - | }
| |
| - | else{
| |
| - | document.getElementById("secondpane").className="menu_list";
| |
| - | }
| |
| - | }
| |
| - | window.onscroll=getScrollTop;
| |
| - | </script>
| |
| - |
| |
| - | <style type="text/css">
| |
| - | #secondpane {color:#fff;
| |
| - | width: 180px;
| |
| - | }
| |
| - | .menu_list {
| |
| - | position:fixed;top:0;}
| |
| - | .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>
| |
| - | </head>
| |
| - | <body>
| |
| - | <div style="float:left;">
| |
| - | <div 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>
| |
| - | </body>
| |
| - | </html>
| |
| - | <div id="text-content">
| |
"
