HTML侧面导航栏效果

<!doctype html>

<html>
<dead>
<meta charset="UTF-8">
<style type="text/css">
#menu1{
z-index:0;
width:150px;
height:69px;
border:1px groove;
visibility:visible;/*是否可见的属性*/
}
.menu2{
z-index:1;
font-size:14px;
align:center;
width:150px;
height:23px;
border:0px;
background-color:white;
}
</style>
<script>
function s1(element){
element.style.backgroundColor="#00FFFF";
element.style.color="white";
}
/*直接用id值传递HTML元素*/
function s2(element){
element.style.backgroundColor="white";
element.style.color="black";
}
function cl(element){
alert(element.value);
}
</script>
</dead>
<body>
<div id="menu1">
<input type="button" οnmοuseοver="s1(span1)" οnmοuseοut="s2(span1)" id="span1" class="menu2" value="中国第一" οnclick="cl(span1)">
<input type="button" id="span2" class="menu2" value="美国第二" οnmοuseοver="s1(span2)" οnmοuseοut="s2(span2)" οnclick="cl(span2)">
<input type="button" id="span3" class="menu2" value="日本去死" οnmοuseοver="s1(span3)" οnmοuseοut="s2(span3)" οnclick="cl(span3)">
</div>
</body>
</html>

HTML侧面导航栏效果相关推荐

Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
Android CoordinatorLayout 实现浮动导航栏效果、常规用法
CoordinatorLayout Android CoordinatorLayout+RecyclerView Demo Android CoordinatorLayout+AppBarLayout ...
Android个性导航栏效果
分享一个导航栏效果的demo 源码下载 github 动图太快了, 效果就是选中的tab永远都在中间的位置可以无限循环滚动切换源码下载 github
闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
android沉浸式模式简书,Android 沉浸式模式与常见状态栏和导航栏效果
Android沉浸式模式官方称沉浸式状态栏为沉浸式模式. 什么是沉浸式? 沉浸式就是让人专注当前的(由设计者营造)情境下感到愉悦和满足,而忘记真实的情境. 什么是Android中的沉浸式? 当启用该 ...

HTML侧面导航栏效果

HTML侧面导航栏效果相关推荐

最新文章

热门文章