61閱讀

導航菜單表現形式-Vue組件tree實現樹形菜單

發布時間:2017-11-11 所屬欄目:優秀實驗指導教師

一 : Vue組件tree實現樹形菜單

vue 編寫的樹形菜單,小巧實用,支持vue1.0,vue2.0

v1.0 功能:

1.支持多級樹目錄
2.支持高亮點擊的節點
3.支持展開點擊節點
4.支持點擊收縮節點時收縮所有子目錄
5.支持自定義回調函數,點擊節點時回調,參數為節點信息

用法:<launch-tree :list='list' :options='options'></launch-tree>

 list = [  {  name: '一級目錄', // 目錄名字  isOpen: true, // 是否初始展開目錄  hightLight: true, // 是否初始高亮  className: undefined, // 添加自定義樣式  childs: [], // 二級目錄  ...{} // 其他用戶額外參數  } ] options = {  callback: undefined // 自定義點擊事件,callback(node) } 

github地址

圖示:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持61閱讀。

二 : CSS3+Js實現響應式導航條

今天制作了一個響應式導航條,能夠自動隨著不同的屏幕分辨率或瀏覽器窗口大小的不同而改變導航條的樣式,這里主要用到的就是CSS3的Media Query。具體可以查看淺談響應式布局這篇文章,這里就不花費大量的篇幅介紹了,主要看一下這個導航條該怎么做。

另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此對于ie6-ie8我們需要特殊處理,就讓他們保持默認樣式,這對于布局及樣式上都要考慮到這一點。

首先看一下布局這一塊,html代碼如下:

復制代碼 代碼如下:


<div class="navBar">
    <div class="nav">
        <ul id="menu">
            <li class="current"><a href="#">首頁</a></li>
            <li><a href="#">電影</a></li>
            <li><a href="#">電視劇</a></li>
            <li><a href="#">動漫</a></li>
            <li><a href="#">綜藝</a></li>
            <li><a href="#">紀錄片</a></li>
            <li><a href="#">公開課</a></li>
        </ul>
        <p class="hot">
            <a href="#">鋼鐵俠3</a>
            <a href="#">中國合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陸貞傳奇</a>
        </p>
        <!--判斷瀏覽器是否是IE9,IE10或者是非IE瀏覽器-->
        <!--[if (gt IE 8) | !(IE)]><!-->
        <h1 class="title" id="title">
            <a href="#">風馳網</a>
            <span class="btn" id="btn"></span>
        </h1>
        <!--<![endif]-->
    </div>
</div>

html部分另外還要有一個條件注釋,當瀏覽器是ie6-8時給html標簽掛載個類"ie6-8",這樣方便樣式表里的處理:

復制代碼 代碼如下:


<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![endif]-->
<html>
...

下面就是樣式控制了,先對整體樣式及ie6-ie8進行處理

復制代碼 代碼如下:


* {margin: 0; padding: 0;}
body {font: 14px/22px "宋體", arial, serif;}

.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}

.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}

.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}

.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}

.ie6-8 .nav .title {display: none;}

ok,下面就用到Media Query了。

當屏幕寬度大于1000px時:

復制代碼 代碼如下:


@media screen and (min-width: 1000px) {
    .nav {width: 1000px; height: 38px;}

    .nav ul li {float: left; width: auto;}
    .nav ul li a {padding: 0 30px 0 30px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}

    .nav .hot {margin-left: 20px; padding-top: 8px;}
    .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
    .nav .hot a:hover {color: #f60; text-decoration: underline;}

    .nav .title {display: none;}
}

當屏幕寬度在640px到1000px之間時:

復制代碼 代碼如下:


@media screen and (min-width: 640px) and (max-width: 1000px) {
    .nav {width: auto; height: 38px;}

    .nav ul li {float: left; width: 14%; min-width: 50px;}

    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}

    .nav .hot {display:none;}
    .nav .title {display: none;}
}

當屏幕寬度小于640px時:

復制代碼 代碼如下:


@media screen and (max-width: 640px) {
    .navBar {margin-top: 0; height: auto; background: #444;}
    .nav {width: auto; height: auto;}

    .nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}

    .nav ul li a:active {background: #f60;}

    .nav .hot {display:none;}

    .nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
    .nav .title a {color: #f60; text-decoration: none;}
    .nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

ok,對于布局及樣式控制就完成了,效果也有了,3中不同狀態下的效果如下圖:

但對于第三幅圖來說,我們還想要一個效果,那就是點擊右下角的圖標時菜單可以收起,那么這該怎么做呢?這可以用js實現,當菜單在收起狀態時,點擊圖片菜單可以展開;當菜單在展開狀態時,點擊圖標菜單可以收起,并且還要有動畫效果。ok,下面來看一下js,但js這一塊就不細說了,貼一下核心代碼吧:

這部分代碼用來產生動畫效果:

復制代碼 代碼如下:


var move = function (obj, target) {
    var timer;
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = (target - obj.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (Math.abs(obj.offsetTop - target) < 4) {
            clearInterval(timer);
            obj.style.marginTop = target + "px";
        } else {
            obj.style.marginTop = obj.offsetTop + speed + "px";
        }
    }, 30);

}

ok,這個響應式導航條基本就這樣了,附上源碼

css3-js-response-nav(61k.com).rar

三 : 網站的導航系統與搜索系統的表現形式

導航與搜索合并的可能性

網站內容的入口很大一部分都是依賴于導航系統,而網站的入口很大一部分依賴于搜索系統,這也在一定意義上證明了導航與搜索之間的重疊性。搜索系統可以完成導航的功能,而導航在一定意義上也可以完成搜索的功能。

網站的導航在一定意義上可以看做是對搜索系統中的關鍵詞類別的提取,這個類別可大可小。比如眾多購物網站中的“手機”類別,這是一個大的類別,而“手機”類別下的“索愛”品牌則是屬于小類別。這兩個類別可以通過導航系統的上下級關系表現出來,同樣也可以基于搜索系統的范圍搜索展現出來。

即使搜索系統在功能上幾乎可以完全替代導航系統,但是導航系統卻仍然是網站中不可缺少的組件,預先以網站主題為核心提取搜索系統中的大類別做為導航,將用戶獲取特定信息的范圍進行類別的篩選。這是從讓用戶在最短的時間內獲取特定信息為出發點的需求。

然而幾乎所有網站的導航系統與搜索系統的表現形式都是區別開來的,以便于用戶快速準確的區分哪里是導航,哪里是搜索。既然導航系統可以做為搜索系統中的一部分,那為何兩者不能在表現形式上也進行疊加呢?

Nav_Search

如上圖,直接將導航系統中的類別以下拉框的形式表現,這個下拉框本身是搜索系統中的一部分,是對搜索范圍的篩選。

第二類的導航與第一類實際上是形式上的差距,但第三類采用聯動的下拉菜單方式則更趨向于搜索系統中的范圍篩選,同時這樣的導航設計也可以兼顧到指引用戶路徑的面包屑導航,然而這個導航的限制是大類別不能進行交叉篩選,只能是線性的范圍篩選。

于是嘗試帶有維度的第四種導航跟搜索的合并方式:

Nav_Search_1

當然,這樣的導航與搜索的合并方式有很大的局限性,那就是網站中的類別不能多,如果是垂直性質的購物網站也許是可行的,用戶可以通過交叉維度的篩選方式去尋找一定范圍內的信息。

如果用戶是有著明確的目標的,比如說知道新聞的標題,或是知道即將購買的物品的名稱型號,那么用戶只需要一個搜索框,導航在這里都是顯得多余的。

四 : 非常優秀的jQuery+CSS實現動態導航菜單教程

導航欄是一個網站最常使用的部分之一,用戶可以通過它有序地訪問網頁并返回到主頁。這就要求導航欄一定要簡單、易用,不要讓用戶在瀏覽網站過程中迷失。接下來我們要談的是其下的導航菜單設計。導航菜單不宜設計成過分花哨,產生令人厭煩的感覺。但也要追求賞心悅目,同時一定要做到方便查找。現在,您可以利用Javascript和jQuery技術設計出不同的導航菜單,本篇文章收集了一些相關教程。

最后,值得提醒的是不要過分使用動態菜單,不要過分復雜,這樣會使人產生煩燥的情緒。在設計導航菜單時力求簡潔,尤其是導航欄更是如此。

Using jQuery for Background Image Animations

Fading Menu – Replacing Content

Create Vimeo-like top navigation

Sexy Drop Down Menu w/ jQuery & CSS

Create an apple style menu and improve it via jQuery

Animated Menus Using jQuery

Animated Jquery Image Menu

Lava Lamp for Jquery Lovers

Create a Cool Animated Navigation with CSS and jQuery

How to Make a Smooth Animated Menu with jQuery

Animated Navigation with CSS & jQuery

Vertical Scroll Menu with jQuery Tutorial

Vertical Sliding jQuery Menu

iPod-style Drilldown and Flyout Menu

Beautiful Slide Out Navigation

JQuery/CSS Dock Menu

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

CSS Sprites2 – It’s JavaScript Time

Animated Drop Down Menu with jQuery

編譯來源:無名之道

原文來自:Excellent jQuery CSS Animated Navigation Menu Tutorials

五 : div+css實現藍色vista風格css導航菜單效果

本文實例講述了div+css實現藍色vista風格css導航菜單效果。分享給大家供大家參考。具體如下:

這是一款藍色vista風格css導航菜單,第一眼看上去很大氣的菜單,采用那種比較艷但不刺眼的藍色作為菜單背景色,另外加入了一些鼠標效果,在鼠標滑上菜單的時候,對應菜單項突出顯示,背景發生變化,CSS代碼還可有再優化的空間,希望大家喜歡。

(www.ituczyr.com.cn)

運行效果如下圖所示:

在線演示地址如下:

-css-vista-style-blue-nav-menu-codes/

具體代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"-transitional.dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>藍色vista風格css導航菜單</title>
<style type="text/css">
<!--
body{font:12px Arial,Verdana,Tahoma,"宋體";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20557A;}
a:hover{text-decoration:underline;}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:55px;background:url(images/nav_bg.gif) repeat-x top;float:left;}
.menu_nav .nav_content{padding-left:4px;background:url(images/nav_l_bg.gif) no-repeat left top;float:left;}
.menu_nav .nav_content li{width:114px;height:55px;padding-left:10px;padding-right:10px;background:url(images/nav_li_right.gif) no-repeat right top;float:left;line-height:55px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:114px;height:55px;display:block;}
.menu_nav .nav_content li.current{line-height:55px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:114px;height:55px;background:url(images/nav_li_current.gif) no-repeat bottom;display:block;color:#000;}
.menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}
p{
margin-bottom:15px}
-->
</style>
</head>
<body style="text-align:center">
<div style="height:100px;"></div>
<div style="clear:both"></div>
<!--nav,start-->
<div class="menu_navcc">
<div class="menu_nav">
<ul class="nav_content">
<li class="current"><a href="#"><span>首頁</span></a></li>
<li><a href="#"><span>廣告代碼</span></a></li>
<li><a href="#"><span>CSS教程</span></a></li>
<li><a href="#"><span>導航菜單</span></a></li>
<li><a href="#"><span>源碼下載</span></a></li>
<li><a href="#"><span>網頁特效</span></a></li>
</ul>
<div class="menu_nav_right"></div>
</div>
</div>
<!--nav,end-->
</body>
</html>

希望本文所述對大家的div+css程序設計有所幫助。

本文標題:導航菜單表現形式-Vue組件tree實現樹形菜單
本文地址: http://www.ituczyr.com.cn/1112347.html

61閱讀| 精彩專題| 最新文章| 熱門文章| 蘇ICP備13036349號-1

JJ大众麻将下载 安徽十一选五今天 广西快乐10分走势图 合肥股票配资 平码减几的下期平码 手机大庆麻将下载 秒速赛车是国家开奖吗 天津11选5玩法说明 下载850土豪版 北京快乐8奇偶 东方6+1兑奖期限 股票融资每天多小利息 捕鱼上下分微信 广西麻将手机版免费下载 天津市十一选五走势 北京11选五30期开奖今天 下载武汉麻将