下滑栏的实现
效果:
html代碼:
<body><div id="menu_bar"><dl class="menu"><dt><span>文件管理</span></dt><dd><a href="#" class="menu_href">打開文件</a></dd><dd><a href="#" class="menu_href">刪除文件</a></dd><dd><a href="#" class="menu_href">存儲文件</a></dd><dd><a href="#" class="menu_href">關閉文件</a></dd><dd><a href="#" class="menu_href">退出</a></dd></dl><dl class="menu"><dt><span>編輯</span></dt><dd><a href="#" class="menu_href">重復操作</a></dd><dd><a href="#" class="menu_href">撤銷操作</a></dd><dd><a href="#" class="menu_href">拷貝</a></dd><dd><a href="#" class="menu_href">粘貼</a></dd></dl><dl class="menu"><dt><span>視圖</span></dt><dd><a href="#" class="menu_href">打印視圖</a></dd><dd><a href="#" class="menu_href">瀏覽視圖</a></dd><dd><a href="#" class="menu_href">開發視圖</a></dd></dl><dl class="menu"><dt><span>窗口</span></dt><dd><a href="#" class="menu_href">上一個</a></dd><dd><a href="#" class="menu_href">下一個</a></dd><dd><a href="#" class="menu_href">顯示</a></dd></dl></div></body>css代碼:
<style type="text/css">* {padding: 0px;margin: 0px;font-size: 12px;}/** 設置在瀏覽器中顯示時，距離瀏覽器邊框的位置*/#menu_bar {position: absolute;left: 50px;top: 50px;}/*** 利用float:left讓其水平顯示*/dl.menu {float: left;width: 120px;}/*** 設置dt和dd的顯示統一的大小* 以及dt的背景顏色*/dl.menu dt, dl.menu dd {height: 30px;background: #339;color: #fff;border-right: #ffffff 1px solid;text-align: center;}/*** 設置dt中文字的具體位置*/dl.menu dt span {position: relative;top: 6px;}/*** 設置dd的背景顏色*/dl.menu dd {background: #911;color: #fff;border-bottom: #ffffff 1px solid;/*display: none;*/}/*** 設置dd中文字的具體位置*/dl.menu dd a {position: relative;top: 6px;}/*** 設置dd中超鏈接的link,visited的樣式*/a.menu_href:link, a.menu_href:visited {text-decoration: none;color: #fff;}/*** 設置dd中超鏈接鼠標移動上去的背景顏色*/dl.menu dd:hover {background: #393;cursor: pointer;}</style>?JavaScript實現動態效果
<script type="text/javascript" charset="utf-8">window.onload = init;function init() {var dls = document.getElementById("menu_bar").getElementsByTagName("dl");var contenter = document.getElementById("contenter");for(var i = 0; i < dls.length; i++) {dls[i].onmouseover = show;dls[i].onmouseout = hidden;};function show() {//找到ddvar dds = this.getElementsByTagName("dd");for(var i = 0; i < dds.length; i++) {dds[i].style.display = "block";};}function hidden() {//找到ddvar dds = document.getElementsByTagName("dd");for(var i = 0; i < dds.length; i++) {dds[i].style.display = "none";};}}</script>?
轉載于:https://www.cnblogs.com/zhangbaowei/p/4750160.html
總結
- 上一篇： codeforces Gym 10033
- 下一篇： Handler(上)——Mars And