2. 程式人生 > >三種CSS3滑動選單程式碼，左右滑動

三種CSS3滑動選單程式碼，左右滑動

阿新 • • 發佈：2019-01-11
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三種背景顏色左右滑動選單導航</title>
<style>
.webwidget_menu_glide{
    padding: 5px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;




    border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
    width: 100px;
    height: 20px;
    background-color: fuchsia;
    position: absolute;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;




    border-radius:10px;
}
.webwidget_menu_glide ul{
    padding: 0px;
    margin: 0px;
    font-family:Arial;
}
.webwidget_menu_glide ul li{
    float: left;
    list-style: none;
    position: relative;
    text-align: center;
    margin-right: 10px;
    width: 100px;
}
.webwidget_menu_glide ul li a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.webwidget_menu_glide ul li ul{
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-radius-bottomright: 7px;
    -khtml-border-radius-bottomleft: 7px;
    border-radius-bottomright: 7px;
    border-radius-bottomleft: 7px;
    border-radius:7px;


    padding-bottom: 5px;
    position: absolute;
    z-index: 999999;
    display: none;
}
.webwidget_menu_glide ul li ul li{
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -khtml-border-radius-topright: 0px;
    -khtml-border-radius-topleft: 0px;
    border-radius-topright: 0px;
    border-radius-topleft: 0px;
    border-radius:0px;
    margin: 0px;
    float: none;
    border:none;
    word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal;
}
</style>
</link>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
(function(a){
    a.fn.webwidget_menu_glide=function(p){
        var p=p||{};


        var f=p&&p.menu_text_size?p.menu_text_size:"12px";
        var g=p&&p.menu_text_color?p.menu_text_color:"blue";
        var h=p&&p.menu_margin?p.menu_margin:"10px";
        var i=p&&p.menu_width?p.menu_width:"100px";
        var j=p&&p.menu_height?p.menu_height:"20px";
        var k=p&&p.menu_sprite_color?p.menu_sprite_color:"red";
        var l=p&&p.menu_background_color?p.menu_background_color:"black";
        var m=p&&p.sprite_speed?p.sprite_speed:"fast";
        f += "px";
        h += "px";
        i += "px";
        j += "px";
        var n=a(this);
        if(n.children("ul").length==0||n.find("li").length==0){
            n.append("Require menu content");
            return null
            }
            s_m(n.children("ul").children("li"),h,i,j);
        s_m_t_c(n.find("a"),g,j,f);
        n.css("background-color",l);
        if(n.children("ul").children("li").is(".current")){
            var o=n.children("ul").children("li").filter(".current").offset()
            }else{
            var o=n.children("ul").children("li:first").offset()
            }
            var q=o.left+'px';
        s_m_s_c(n.find(".webwidget_menu_glide_sprite"),k,i,j,q);
        n.children("ul").children("li").hover(function(){
            var b=$(this).offset();
            var c=b.left+'px';
            n.find(".webwidget_menu_glide_sprite").stop().animate({
                left:c
            },m)
            },function(){
            n.find(".webwidget_menu_glide_sprite").stop().animate({
                left:q
            },m)
            });
        n.children("ul").children("li").children("ul").children("li").hover(function(){},function(){});
        function s_m_t_c(a,b,c,d){
            a.css("color",b);
            a.css("line-height",c);
            a.css("font-size",d)
            }
            function s_m(a,b,c,d){
            style="margin-right:"+b+"; width: "+c+"; height: "+d+";";
            a.attr("style",style)
            }
            function s_m_s_c(a,b,c,d,e){
            a.css("background-color",b);
            a.css("width",c);
            a.css("height",d);
            a.css("left",e)
            }
        }
})(jQuery);
</script>
</head>
<body>
<table width="600">
  <tr>
    <td><h2>Demo1</h2>
      <br/>
      <br/>
      <script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide1").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide1" });
            });
        </script>
      <div id="webwidget_menu_glide1" class="webwidget_menu_glide">
        <div class="webwidget_menu_glide_sprite"></div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/">News</a></li>
          <li class="current"><a href="/">About</a></li>
          <li><a href="/">Contact</a></li>
          <li><a href="/">More...</a></li>
        </ul>
        <div style="clear: both"></div>
      </div></td>
  </tr>
  <tr>
    <td><h2>Demo2</h2>
      <br/>
      <br/>
      <script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide2").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide2" });
            });
        </script>
      <div id="webwidget_menu_glide2" class="webwidget_menu_glide">
        <div class="webwidget_menu_glide_sprite"></div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/">News</a></li>
          <li class="current"><a href="/">About</a></li>
          <li><a href="/">Contact</a></li>
          <li><a href="/">More...</a></li>
        </ul>
        <div style="clear: both"></div>
      </div></td>
  </tr>
  <tr>
    <td><h2>Demo3</h2>
      <br/>
      <br/>
      <script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide3").webwidget_menu_glide({menu_width:"100", menu_height:"23", menu_text_size:"12", menu_text_color:"#FFF", menu_sprite_color:"#86C7EF", menu_background_color:"#0F67A1", menu_margin:"2", sprite_speed:"normal", container:"webwidget_menu_glide3" });
            });
        </script>
      <div id="webwidget_menu_glide3" class="webwidget_menu_glide">
        <div class="webwidget_menu_glide_sprite"></div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/">News</a></li>
          <li class="current"><a href="/">About</a></li>
          <li><a href="/">Contact</a></li>
          <li><a href="/">More...</a></li>
        </ul>
        <div style="clear: both"></div>
      </div></td>
  </tr>
</table>
</body>
</html>

相關推薦

三種CSS3滑動選單程式碼，左右滑動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

貓狗大戰：融合了三種模型的Keras程式碼，準確率直升到99%

使用keras的resnet，inceptionV3，xception模型，首先載入預訓練模型的權重，通過預訓練權重生成對貓狗的訓練值和測試值的特徵向量 預訓練模型下載地址：http://pan.baidu.com/s/1geHmOpH from ker

HDOJ--1869--六度分離(用三種算法寫的，希望能比較出來他們之間的差別)

tdi pty time 著名 連接 clu 展開 mil 他在 六度分離 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm

.Net MVC 導入導出Excel總結(三種導出Excel方法，一種導入Excel方法) 通過MVC控制器導出導入Excel文件(可用於java SSH架構)

ets esp llb pat lencod cnblogs 創建 etime mmd public class ExcelController : Controller { // // GET: /Excel/ M

Android------實現圖片雙擊放大，縮小，左右滑動的多種方式

params getcount androi nullable per try out 多圖 tro 項目中常常有圖片瀏覽功能。像微信朋友圈圖片瀏覽，QQ空間照片瀏覽 的功能。 實現圖片雙擊放大，縮小，左右滑動等效果。 來看看我的效果圖，希望能滿足你的要求 前

三種排序：快排，歸並，堆排

new swap 簡單 數組合並 col 最大 heapsort 堆排序 大神 轉自：http://www.cnblogs.com/LUO77/p/5798149.html （一）快排 快排考的是最多次的。之前看大神寫的算法很簡單，思想也很好。就一直用他的思想去思考快排

雲計算的三種服務模式：IaaS，PaaS和SaaS

雲服務 互聯網 src 部分 stand googl 而且 vnc rackspace 　　雲服務”現在已經成了一個家喻戶曉的詞了。如果你不知道PaaS, IaaS 和SaaS的區別，那麽也沒啥，因為很多人確實不知道。　　“雲”其實是互聯網的一個隱喻，“雲計算”其實就是使用

zookeeper的三種模式（單機模式，為分散式，完全分散式）

Zookeeper安裝 　　zookeeper的安裝分為三種模式：單機模式、叢集模式和偽叢集模式。 單機模式 　　　　首先，從Apache官網下載一個Zookeeper穩定版本，本次教程採用的是zookeeper-3.4.9版本。 http://a

MyBatis 延遲加載的三種加載方式深入，你get了嗎？

ble 必須 關聯 數據 之前 默認值 種類型 加載 節點 延遲加載 　　延遲加載對主對象都是直接加載，只有對關聯對象是延遲加載。 　　延遲加載可以減輕數據庫的壓力， 　　延遲加載不可是一條SQL查詢多表信息，這樣構不成延遲加載，會形成直接加載。 　　延遲加載分為三種類型：

java斐波那契數列（Fibonacci sequence）的三種方式：遞迴，備忘錄，動態規劃

java斐波那契數列（Fibonacci sequence）的三種方式：遞迴，備忘錄，動態規劃 1.最常使用的是遞迴，就是從上往下尋找答案，然後在返回來。 2.備忘錄也是從上往下，只是去掉了遞迴中重複計算的部分，因為它使用一個容器來裝已經計算出的值，這裡就多一個判斷，如果計算過該式子，就直接

android：RecyclerView互動動畫（上下拖動，左右滑動刪除）

效果 RecyclerView互動動畫主要使用的是ItemTouchHelper這個類 建立MyItemTouchHelperCallback繼承系統ItemTouchHelper.Callback import android.graphi

使用Vue做一個簡單的todo應用的三種方式的示例程式碼

這篇文章主要介紹了使用Vue做一個簡單的todo應用的三種方式的示例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧   1. 引用vue.js `<!DOCTYPE html>` `<html>` `<head>`

從壹開始前後端分離【 .NET Core2.0 +Vue2.0 】框架之十二 || 三種跨域方式比較，DTOs(資料傳輸物件)初探

更新反饋 1、博友@童鞋說到了，Nginx反向代理實現跨域，因為我目前還沒有使用到，給忽略了，這次記錄下，為下次補充。 程式碼已上傳Github+Gitee，文末有地址 　　今天忙著給小夥伴們提出的問題解答，時間上沒把握好，都快下班了，趕緊釋出：書說上文《從壹開始前

樹的三種遍歷方法程式碼實現 （資料結構）C語言

樹的三種遍歷方法：前序，中序和後序及其程式碼實現。 在此分別總結先序，中序，後序的結點輸出順序。   先序： 1.訪問根結點 　　　　2.訪問左子樹 　　　　3.訪問右子樹  中序：1.訪問左子樹 　　　  2.訪問

jquery實現橫向tab，滑動tab時內容左右滑動

最近寫一個電商的網站，要相容ie8。所以用的jquery，很久沒用jquery了，寫一個效果都很傷腦。 橫向tab,滑動tab時內容左右滑動出現 首先是html程式碼 <div class="container"> <div class=

day039mysql多表查詢（三種方法）及備份，Navicat工具，pymysql的使用

本節內容： 1、MySQL之多表查詢 2、Navicat工具 3、mysql資料庫備份 4、pymysql模組 參考文章1參考文章2 一、MySQL之多表查詢

某產品使用A、B、C三種零件組裝而成，三種零件分別由三個相應的零件車間生產。零件組裝則由裝配車間完成，裝配車間有三個分別存放三種零件的貨架S1,S2,S3，分別可存放最多m個A零件，n個B零件，k個C

某產品使用A、B、C三種零件組裝而成，三種零件分別由三個相應的零件車間生產。零件組裝則由裝配車間完成，裝配車間有三個分別存放三種零件的貨架S1,S2,S3，分別可存放最多m個A零件，n個B零件，k個C零件，每件產品分別使用A,B,C三種零件各一個裝配而成，請採

三種不同的程式設計師，你屬於哪一種？如果要裁員，你會讓誰走？

秋招剛過，網際網路上便掀起了程式設計師”縮招“的風波，傳言華為已經停止社招，BAT等Offer也遲遲沒有響應。2019年將近，網際網路公司開始有大動作了。作為生存率較低的群體，網際網路公司每年都會進行或少或多的裁員，不少大型網際網路公司都有著一套末尾淘汰制度（比

Android自定義View的三種方式：繼承佈局，繼承原生控制元件，繼承View

 自定義View非常的常用，也是Android開發的一項基本技能，自定義View有三種方式：繼承佈局，繼承原生控制元件，繼承View。一、繼承佈局先看效果圖：程式碼實現：1.在layout資料夾中建立佈局title_view.xml，這一步根據自己需要寫，本例中的佈局如下：佈

[轉]決定人生的三種成本：機會成本，沈沒成本，邊際成本

nsh 個人 做出 思想 可能 rtu 邊際 .com 可能性 http://www.201980.com/lizhi/rensheng/23159.html 三種成本，決定你是一無所有，還是財富自由 作者：Spenser（原名，陳立飛，混跡創投圈的職場墨客） 摘自公眾號：