实现左侧导航和横向导航

最新推荐文章于 2021-02-24 01:21:32 发布
最新推荐文章于 2021-02-24 01:21:32 发布
阅读量6.7k 收藏 3
点赞数 3
分类专栏： jquery-easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cgwcgw_/article/details/23343767
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="jquery-easyui/demo/demo.css">  
     <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>  
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>  
</head>
<body>
     <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
    </div>
    <div id="mm1" style="width:150px;">
        <div data-options="iconCls:'icon-undo'">Undo</div>
        <div data-options="iconCls:'icon-redo'">Redo</div>
        <div class="menu-sep"></div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div>
            <span>Toolbar</span>
            <div>
                <div>Address</div>
                <div>Link</div>
                <div>Navigation Toolbar</div>
                <div>Bookmark Toolbar</div>
                <div class="menu-sep"></div>
                <div>New Toolbar...</div>
            </div>
        </div>
        <div data-options="iconCls:'icon-remove'">Delete</div>
        <div>Select All</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div data-options="iconCls:'icon-ok'">Ok</div>
        <div data-options="iconCls:'icon-cancel'">Cancel</div>
    </div>
    <div id="mm3" style="width:150px;">
        <div>Help</div>
        <div>Update</div>
        <div>
            <span>About</span>
            <div class="menu-content" style="padding:10px;text-align:left">
                <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
                <p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
            </div>
        </div>
    </div>
 
  <div class="easyui-accordion" style="width:150px;height:200px;">  
        <div title="系统管理"  style="overflow:auto;padding:10px;">  
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
            <p>Accordion</p>  
        </div>  
        <div title="功能菜单"  style="padding:10px;">  
            <p>The accordion</p>          
        </div>  
        <div title="用户管理" style="padding:10px;">  
            <p>The accordion</p>          
        </div>  
        <div title="目标管理"  style="padding:10px;">  
            <p>The accordion</p>          
        </div>  
    </div>  
    

</body>
</html>

静山晚风
关注
专栏目录
EasyUI+js实现动态加载导航栏
Jack 架构师之路
10-18 1万+
引言    小编最近在做项目的时候遇到一个权限控制的功能，就是根据权限的大小来控制导航栏中的内容，这就遇到了 动态加载导航栏的功能了，但是根据整个界面的风格需要需要用到EasyUI，在开始的时候没有头绪来解决这个问题， 所以就查阅了EasyUI的API文档，俗话说：“如果学会了查看某个技术的API文档，那么编程就成功了一半”，所以我 在API文档中找到了一丝
使用EasyUI搭建树形界面以及导航栏
m0_62839141的博客
04-07 1477
一，项目结构 二，创建数据库 CREATE TABLE t_module ( id integer DEFAULT NULL, pid integer DEFAULT NULL, text VARCHAR(150) DEFAULT NULL, icon VARCHAR(90) DEFAULT NULL, url VARCHAR(180) DEFAULT NULL, sort integer DEFAULT NULL ); INSERT INTO t_module VA
jQueryUI横向导航栏
11-10
插件描述：基于jQueryUI的三级菜单导航栏，横向全屏，蓝色商务风格，简约大方。我们公司正在用这个插件。
Framework修改导航栏(横屏)显示在屏幕左边
u010218230的博客
02-28 2980
修改文件路径：frameworks\base\services\core\java\com\android\server\policy\PhoneWindowManager.java--- core/java/com/android/server/policy/PhoneWindowManager.java (revision 24) +++ core/java/com/android/serve...
jquery easyui 三级菜单导航
01-03
通过jquery easyui 实现三级菜单导航栏
横向滚动导航栏（点击+滑动+横线）
热门推荐
半把秋风的博客
11-17 1万+
项目出现新的需求 具体是： 1. 可左右滑动 2. tab初始显示4.5个，点击到未显示的需要显示出来，点击tag后面（如果是点击左侧的，指前面）还存在未显示的tag，显示出半个来，并且地下红线需要跟着标签移动（后来实现后发现当前高亮的tag如果被滑出屏幕，红线还在屏幕内，自己又添加了滚出屏幕的实现）;思路 1. 首先实现上需要可滑动，那么一般性的会选择 HorizontalScr
Android项目导航菜单横向左右滑动并和下方的控件实现联动.rar
09-09
本项目"Android项目导航菜单横向左右滑动并和下方的控件实现联动"就是针对这一需求设计的，它实现了侧滑导航菜单与主内容区域的动态联动效果。这种效果常见于许多流行的移动应用中，比如Google Maps和Facebook等。 ...
JavaScript实现的3级横向导航菜单源码
05-18
本篇将详细介绍如何使用JavaScript实现一个三级横向导航菜单。 首先，我们需要理解基本的HTML结构。一个简单的导航菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素组成。对于多级菜单，我们可以嵌套`<ul>`和`...
js实现横向拖拽导航条功能
12-04
在本文中，我们将深入探讨如何使用JavaScript实现一个横向拖拽导航条的功能。这个功能允许用户通过鼠标拖动来改变导航条中元素的顺序，提供了一种直观且互动的用户体验。 首先，我们需要创建HTML结构，这通常包括一...
mpvue实现左侧导航与右侧内容的联动
10-16
实现左侧导航与右侧内容联动的关键在于，当用户点击左侧的导航项时，右侧的内容区域能够滚动到与该导航项关联的视图位置。利用mpvue和微信小程序的scroll-view组件的scroll-into-view属性，可以很容易地实现这一功能...
js 特效 html 特效 固定的左侧导航菜单
06-14
js 特效 html 特效 固定的左侧导航菜单 js 特效 html 特效 固定的左侧导航菜单
JQuery横向纵向导航菜单
04-21
JQuery横向纵向菜单，非常完美，缓慢滑动效果，个人觉得不错。。。
带左侧展开菜单的Delphi漂亮界面..rar
05-09
带左侧展开菜单的Delphi漂亮界面..rar
侧边栏分类菜单控件(LeftMenu)
05-15
侧边栏分类菜单控件(LeftMenu) 你看到的文件来自：E动天下(http:/www.2e3.org)
Delphi下窗口左边工具条
02-09
Delphi下窗口左边工具条,类似网页左边工具条，可以多页面切换
导航菜单横向左右滑动并和下方的控件实现联动.zip
最新发布
11-04
在安卓应用开发中，创建一个动态且交互性强的用户界面是至关重要的，这不仅能够提升用户体验，还能增加应用的吸引力...通过分析和实现该项目，开发者不仅可以提升自己的编程技能，还能对安卓开发的全貌有更深入的理解。
横向导航/顶部导航
lz0426001的专栏
11-26 753
这里主要的导航菜单是放置在页面的顶部，网站上有大量内容,比如Facebook。有时除了使用顶部菜单，侧边栏菜单的导航布局也是非常方便的。 优点： 经证实，人们阅读水平文本更快和更容易，因为水平导航便于读者扫描。使用最少的竖屏空间，让屏幕内容更加宽。手机屏幕上看效果更好。 缺点： 主要的navigatio.n环节，由于屏幕的宽度有限，数量也将有限。顶部菜单会导致所谓的"两难选择"。随
来个横向电梯导航
weixin_34054866的博客
06-13 159
&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;
竖屏java转横屏_Android屏幕旋转之横屏竖屏切换的实现
weixin_30211217的博客
02-24 711
刚实现了App内手机横/竖放置时，屏幕横/竖屏的切换。记录一下中间需要的关键信息和实现过程。开门见山的说，实现屏幕自动/手动旋转的方式有两种：一种是在工程的代码中定义，这种方式在横竖屏切换时执行的操作是：销毁当前Activity–根据新的屏幕尺寸重建Activity。如果不进行数据存储的操作，在切换的过程中Activity中的数据会丢失。另一种是在工程的AndroidManifest.xml中定义...
html制作横向酷炫呼吸效果导航栏
04-02
以下是一个简单的横向酷炫呼吸效果导航栏的HTML代码示例： ```html <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ``` 以下是CSS样式代码： ```css .navbar { background-color: #222; height: 50px; width: 100%; } ul { list-style-type: none; margin: 0; padding: 0; display: flex; } li { flex: 1; text-align: center; } a { display: block; color: white; text-decoration: none; padding: 15px 0; position: relative; } a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; } a:hover:before { visibility: visible; transform: scaleX(1); } ``` 解释一下这个代码： - `nav`元素是导航栏的容器，我们设置了它的`background-color`为黑色，高度为50像素，宽度为100%。 - `ul`元素是`li`元素的容器，我们设置了它的`list-style-type`为`none`，`margin`和`padding`为0，以及`display`为`flex`，以便让子元素`li`在一行中平均分布。 - `li`元素是导航栏中的每个项目，我们设置了它的`flex`为1，以便它们平均分布在`ul`中。 - `a`元素是每个项目的链接，我们设置了它们的`display`为`block`，以便它们占据整个`li`元素的空间，`color`为白色，`text-decoration`为`none`，`padding`为15像素顶部和底部，以及`position`为`relative`，以便我们可以在它们上面添加一个伪元素。 - `a:before`是在每个链接前添加的伪元素，它是一个白色的横线，我们设置它的`content`为空，宽度为100%，高度为2像素，位置为绝对定位，底部为0，左侧为0，背景色为白色，可见性为隐藏，以及一个`transform`属性，用于将它的比例缩放到0。 - `a:hover:before`是当鼠标悬停在链接上时，我们希望横线可见，因此我们设置了它的可见性为可见，以及一个`transform`属性，将它的比例缩放到1，以制造出酷炫的呼吸效果。 通过这些HTML和CSS代码，您可以创建一个简单而酷炫的横向呼吸效果导航栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

静山晚风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值