使用hovertree菜单作为后台导航

hovertree是一个jquery菜单插件,官方网址:http://keleyi.com/jq/hovertree/ ,可以登录该网址体验效果。

0.1.3版本:http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm

hovertree插件包含文件:

http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.3.min.css

http://keleyi.com/jq/hovertree/js/jquery.hovertree.0.1.3.js

和一张小图片hovertree.png(包含在下面的asp.net项目中)

还要记得引入jquery文件:http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js

最后的js代码:

<script type="text/javascript">
        $("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": ‘keleyi‘, "subMenuShowSpeed": 200,
            "subMenuShowWay": "slidedown"
        });
    </script>

HoverTree菜单0.1.3增加弹出菜单的动态效果,可以是动态下拉,也可以是动态淡入。

HoverTree菜单0.1.3参数:

width: ‘keleyi‘,// ‘200px‘
isCloseOther: false, //当点击展开一个一级菜单时,关闭其他已经展开的一级菜单项。
initStatus: ‘keleyi‘, //‘keleyi‘、‘expand‘或‘close‘。
subMenuShowWay: "show",弹出菜单的显示方式 fadeIn,slidedown,或show
subMenuShowSpeed: 0,弹出菜单的速度,越大越慢

hovertree同时也是一个asp.net开源项目,完全开放源代码,下载地址:http://hovertree.codeplex.com/

该项目使用.net 4.0开发,数据库是 sql server,C#语言。

目前已经初步实现了留言板功能,体验效果:http://h.keleyi.com/guestbook/

这是前台的效果,后台请下载源代码安装。

web前端资源:

http://www.cnblogs.com/jihua/p/webfront.html

时间: 2024-10-18 16:31:36

使用hovertree菜单作为后台导航的相关文章

bootstrap-导航加下拉菜单(二级导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航加下拉菜单(二级导航)</title>     <!-- 最新版

MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现--导航菜单的增删改查(3)

补充上面的点击菜单表信息: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks; namespace SqlServer.Entity{ public class Menu_Operation { private int _operation_id; public int Operation_id { get { return

在同一个页面设置两个选项卡菜单 滑动式导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>唐山塑钢门窗</title>

五中常用简洁后台导航菜单(一级导航,二级导航,手风琴式导航,左或右悬浮式导航,树状导航)

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

opencart 后台导航菜单添加步骤

1,找到在catalog\language\english\common\header.php // Text$_['text_affiliate'] = 'Affiliates';$_['text_attribute'] = 'Attributes';$_['text_attribute_group'] = 'Attribute Groups';$_['text_backup'] = 'Backup / Restore';$_['text_banner'] = 'Banners';$_['te

【Ztree】前台展示多级菜单,后台配置方法

第一步.前台HTML页面. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="feeClassification.aspx.cs" Inherits="Webs.pages.Parameter.feeClassification" %> 2 3 <!DOCTYPE html> 4 <html lang="en-us&q

04 菜单 按钮及导航

//下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">//dropdown 必须要和容器的class一样 下拉菜单 <span class="caret&q

【转】Asp.net 用datalist嵌套的方法实现二级菜单的分类导航

刚开始学习Asp.net做网站的时候, 做的是一个电子图书购买网站,发现图书有多级类目.   例如:小说分类下面世界名著,中国古典小说.......  文学类目下有 文学理论 中国古典诗歌. 这些要是直接写死在网站里面的话,不利于后面去添加和修改分类,这样做的话是非常不利于后期网站维护的.那么有什么办法把两级分类数据都通过去后台输入,前台去读取呢?也就是这些分类存在数据库中,实现动态读取. 找了些资料,然后我整合下,终于可以应用到自己的网站了.  用的是Listview或者datalist嵌套.

Bootstrap4后台导航栏制作

<!Doctype html> <html lang="zh-cn"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">