最简单的javascript 竖向菜单

最新推荐文章于 2022-02-17 15:06:45 发布
最新推荐文章于 2022-02-17 15:06:45 发布
阅读量120 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/lizihong/p/4012626.html
版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function k1(vd) {
            var ob = document.getElementById(vd);
            ob.style.display = "none";
            //var ob2 = document.getElementById('s' + vd);            
        }

        function k0(vd) {
            var ob = document.getElementById(vd);            
            ob.style.display = "block";
            //var ob2 = document.getElementById('s' + vd);        
        }
    
    </script>

    <style type="text/css">
        .b
        {
            width:100px;
           margin:5px,auto,5px,auto;
           padding:2px,2px;
           background-color:Gray;
           line-height:35px;
           font-family:@Arial Unicode MS;
           font-size:18px;         
        }
        .ps
        {
               display:none;
            }
    
    </style>
</head>
<body>
 
  <div id="sfgc91" class="b" οnmοusemοve="k0('fgc91')" οnmοuseοut="k1('fgc91')"  οnclick="k0('fgc91')" >
      <a target="FrameRight" href="#">菜单1</a>
      <div class="ps" id="fgc91">
       <div class="b"><a target="FrameRight" href="#">1-1</a></div>
       <div class="b"><a target="FrameRight" href="#">1-2</a></div>
       <div class="b"><a target="FrameRight" href="#">1-3</a></div>
      </div>
  </div>

   <div id="sfgc92" class="b" οnmοusemοve="k0('fgc92')" οnmοuseοut="k1('fgc92')"  οnclick="k0('fgc92')">
      <a target="FrameRight" href="#">菜单2</a>
      <div class="ps" id="fgc92">
       <div class="b"><a target="FrameRight" href="#">2-1</a></div>
       <div class="b"><a target="FrameRight" href="#">2-2</a></div>
       <div class="b"><a target="FrameRight" href="#">2-3</a></div>
      </div>
  </div>

   <div id="sfgc93" class="b" οnmοusemοve="k0('fgc93')" οnmοuseοut="k1('fgc93')"  οnclick="k0('fgc93')">
      <a target="FrameRight" href="#">菜单3</a>
      <div class="ps" id="fgc93">
       <div class="b"><a target="FrameRight" href="#">3-1</a></div>
       <div class="b"><a target="FrameRight" href="#">3-2</a></div>
       <div class="b"><a target="FrameRight" href="#">3-3</a></div>
      </div>
  </div>

</body>
</html>

转载于:https://www.cnblogs.com/lizihong/p/4012626.html

js实例教程一：用js实现竖的隐藏菜单
不给失败找借口，只给成功想办法
03-30 1841
通过js实现的简单隐藏表单~
JS实现的竖向折叠菜单代码
10-23
本文主要介绍了利用JavaScript实现一个具有竖向折叠功能的菜单。在介绍的过程中，涉及到了几个重要的知识点，包括HTML的结构设计、CSS的样式设计、JavaScript事件的绑定和动态操作DOM等。以下是对这些知识点的详细...
50-简单的竖直排列的菜单
高调做事，低调做人！
10-15 1414
简单的数值排列菜单 /*设置背景颜色为浅色*/ body{ background-color:#dee0ff; } /*设置整个Div块的宽度为150像素，并设置文字的字体*/ #navigation{ width:150px; font-family:Arial; font-size:14px; text-align:right; } /*不显示项目符号*/ #navig
用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
weixin_33836874的博客
11-26 160
/判断手机横竖屏状态： function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态！") } if(window.orientation==90||window.orientation==-90){ ...
JS竖向菜单
天空守护云
01-25 518
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; *{padding:
用JavaScript实现横向滑出的多级竖向菜单_网页代码站(www.webdm.cn)
weixin_34381666的博客
12-30 110
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&g...
JavaScript实现简单的二级导航菜单实例
10-24
### JavaScript实现简单二级导航菜单知识点详解 #### 前言 本文档详细介绍了如何使用JavaScript实现一个简单的二级导航菜单。二级导航菜单是网页中常用的一种导航结构，它可以在一级菜单的基础上展开二级菜单，...
javascript简单实现滑动菜单效果的方法
10-23
本文通过一个实例详细解析了如何使用JavaScript实现滑动菜单效果。滑动菜单是一种常见的网页交互设计，通常用于导航栏或侧边栏，以节省空间并提供良好的用户体验。在JavaScript中，滑动菜单的实现主要依赖于对DOM...
JavaScript 下拉菜单实现代码
10-29
本示例将详细介绍如何使用JavaScript和CSS来创建一个动态的下拉菜单。 首先，我们来看HTML结构。一个基本的下拉菜单通常包含一个主级`<ul>`标签，其中嵌套着若干个`<li>`元素，每个`<li>`可能包含一个次级`<ul>`...
JavaScript实现左侧菜单效果
10-18
这个简单的菜单实现有助于提升用户体验，使得用户可以方便地浏览和选择所需内容。随着技术的深入学习，可以使用更高级的CSS3动画和更优雅的JavaScript库（如jQuery或Vue.js）来增强菜单效果，实现更复杂的交互体验。...
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
JS实现数据动态渲染的竖向步骤条
10-15
主要为大家详细介绍了JS实现数据动态渲染的竖向步骤条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript（竖版）树形菜单实例（3.2）
点滴生活
08-21 313
[code="java"] .item1, .item2, .item1_mover, .item2_mover, .subitem1, .subitem1_mover, .subitem2, .subitem2_mover{color:white; background-color:#6262ff; width:100px; height:25px; padding:3px; ...
javascript（竖版）树形菜单实例（比较高级3.1）
点滴生活
08-21 266
[code="java"] tree menu by jiarry span{ width:100px;Height:25px;margin-left:15px;} font{font-weight:bold;} body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px...
【JavaScript】关于竖号（||） 写组件的模式
程序猿开发日志【学习永无止境】
03-23 974
一 编写组件的流程 组件是利用JavaScript生成HTML结构，配合既有CSS生成页面中的内容。 用处是：便于修改、维护，可重用 完成静态HTML与CSS 将组件结构与样式使用HTML与CSS整体展现出来，不需要JavaScript。 去掉组件的HTML结构，使用JavaScript面向对象的模式创建原有HTML结构， 并且添加交互功能 创建组件对
js运算符单竖杠“|”的用法和作用及js数据处理
HY_358116732的博客
07-26 1516
js运算符单竖杠“|”的作用 很多朋友都对双竖杠“||”，了如指掌，因为这个经常用到。但是大家知道单竖杠吗？今天有个网友QQ问我，我的 javascript实用技巧，js小知识 ， 这篇文章里面，js整数的操作运用了单竖杠，问我单竖杠是啥意思？ 我看了一下之前的那篇文章，只写了用法，但是并没有解释。好吧，我现在就给大家简单的介绍一下： 之前文章，在js整数操作的时候，相当于去除小数点，par...
纯css 竖向步骤条
半盏茶. ོ
02-17 2450
一、平常做一些物流啊提现啊这些效果的时候可能就需要用到步骤来向用户展示具体到哪一步了，但是呢有时候写的又比较繁琐，找各种组件插件又要安装或者引入对应的包，今天就给大家分享一个纯css的竖向步骤条，先看效果图： 二、废话不多说，直接上代码，HTML： <div class="stepItem" v-for="(item,index) in billList.handle" :key="index"> <van-icon name="passed" size=".45rem"
CSS竖向步骤条
weixin_33893473的博客
01-15 4830
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS竖向步骤条</title> <style type="text/css"> * { margin: ...
ElementUI UI框架中竖式步骤条step组件如何在右侧显示日期
站在顶峰看星星
06-11 3659
1.场景： 实际开发中，我们经常会遇到步骤条可能会是竖直的，例如审批、快递配送等案例。今天给大家分享一个比较常用的案例，配后后端返回的数据实体举例： 图一为ElementUI框架中提供的原始step组件，图二为我们今天要实现的效果： 图一： 图二： 2.实现： <template> <div> <!-- 查看审批进度 start --> <div style="overflow-y: auto"> <el-steps d
动手实现JavaScript悬浮菜单
在提供的代码片段中，可以看到一个包含多个段落（`<p>`）和标题（`<h1>`）的简单页面布局，这些将作为悬浮菜单的触发元素。为了实现悬浮效果，通常会创建一个额外的容器元素来承载菜单，如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值