【CSS】簡易的頁面側邊欄導航

阿新 • • 發佈：2019-02-13

這裡寫圖片描述

演示地址：點我

測試程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*左側邊欄*/
        a{
            text-decoration: none;
        }
        .sideBar {
            position: fixed;
            left: 20px 
;
            top: 35%;
        }
        .sideBar .ftName {
            position: relative;
        }
        .sideBar dl dd {
            position: relative;
            width: 80px;
            height: 80px;
            background-color: #646577;
            border-bottom: solid 1px #999;
            text-align 
: center;
            background-repeat: no-repeat;
            background-position: center 20%;
            cursor: pointer;
        }
        .sideBar dd span {
            color: #fff;
            display: block;
            padding-top: 32px;
        }
        .sideBar .words span {
            padding-top 
: 22px;
        }
        .sideInfo {
            position: absolute;
            left: 90px;
            top: 0;
            width: 250px;
            background-color: #646577;
            display: none;
            padding: 0 10px;
        }
        .words .sideInfo {
            padding: 6px 10px;
        }
        .sideInfo a, .sideInfo p {
            color: #fff;
        }
    </style>
</head>
<body>
    <!--左側邊欄-->
    <div class="sideBar">
        <dl>
            <dd class="ftName consult">
                <a href="http://www.kytrack.com/">
                    <span>包裹查詢</span>
                </a>
                <div class="sideInfo">
                    <p>批量查詢跨境包裹物流派送資訊，支援郵政、DHL、UPS、EMS、FedEX等服務。</p>
                </div>
            </dd>
            <dd class="ftName words">
                <a href="http://geren.kytrack.com/">
                    <span>進口個人<br>額度查詢</span>
                </a>
                <div class="sideInfo">
                    <p>查詢通過進口跨境電商渠道購買，已用額度。</p>
                </div>
            </dd>
            <dd class="ftName quote">
                <a href="http://www.expecs.com/">
                    <span>快郵線上</span>
                </a>
                <div class="sideInfo">
                    <p>快郵線上物流綜合服務平臺為電商及外貿企業提供物流、通關、金融等服務。</p>
                </div>
            </dd>
        </dl>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        /*側邊欄*/
        $('.consult').hover(function(){
            if($('.consult .sideInfo').is(':hidden')){
                $('.consult .sideInfo').show();
            }else{
                $('.consult .sideInfo').hide();
            }
        });
        $('.words').hover(function(){
            if($('.words .sideInfo').is(':hidden')){
                $('.words .sideInfo').show();
            }else{
                $('.words .sideInfo').hide();
            }
        });
        $('.quote').hover(function(){
            if($('.quote .sideInfo').is(':hidden')){
                $('.quote .sideInfo').show();
            }else{
                $('.quote .sideInfo').hide();
            }
        });
    </script>
</body>
</html>

【CSS】簡易的頁面側邊欄導航

演示地址：點我測試程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

Django學習筆記三：頁面側邊欄最新文章，文章歸檔，分類,標籤雲的實現

前言執行效果（箭頭 == 點選）根據效果圖可以知道我們要實現的功能：將內容填充到各個側邊欄對應的內容下面，並實現對應的跳轉功能。下面我們一項一項的實現下列的功能：首先在blog應用下建立一個templatetags資料夾，資料夾下

封裝Activity基類+側邊欄+導航欄+輪播圖+Async網路請求+Gson解析+多個ViewPage與Fragment=首頁面

1.導包+依賴+Xlistview外掛 compile 'com.google.code.gson:gson:2.2.4' <uses-permission android:name="android.permission.WRITE_EXTERNAL_

Bootstrap 側邊欄導航欄

div post hang gpo 側邊欄 article png inf class http://blog.csdn.net/shangmingchao/article/details/49763351 實測效果圖： Bootstrap 側邊欄導航欄

vue側邊欄導航，右側顯示對應內容

最終效果點選下一個導航，上一個導航自動收回實現程式碼 1.下載vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue

ecshop文章側邊欄導航,自動呼叫文章多級子欄目分類並且當前欄目及父欄目高亮顯示

效果圖介紹: 一,比如訪問ecshop的國內新聞(上圖沒顯示),及子分類,如山東新聞,臨沂新聞,上海新聞等,都會自動顯示上圖所示的側導航條. 二,另外,如果我訪問子導航,比如居民小區,則平涼新聞的兄弟欄目,父欄目,子欄目,都可以自由設定高亮顯示.而山東新聞及其子欄

側邊欄導航(移動端商品--評論--詳情)隨樓層滑動高亮顯示

接觸前端一年時間，開始還能感覺到自己的進步，隨著時間的推移，開始不知道方向。因為各種前端的框架和外掛在網上都能夠找到現成的，直接下載下來用就好了。從來不考慮其中的實現原理什麼的，即便是去看了其中的原始碼，也是知其然而不知其所以然。舉一個簡單的例子：去年聖誕公司要求頁面

【被玩壞的博客園】之canvas裝飾博客園側邊欄

ctx tail lang num radi sid 應用 ack 火狐最近抽空學了學canvas,然後用canvas做了個小球運動的demo,大致的效果如下：雖然網上已經有很多這樣的demo,但是還是想根據自己的思路來寫一個，下面先跟大家講解一下源代

【React Native 安卓開發】----側邊欄的實現DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

前言做過安卓原生開發的童鞋們應該都做過側邊欄這個東西，而且對於開源框架SlidingMenu和android官方側滑選單DrawerLayout應該都不陌生。那麼今天也在這裡給大家介紹一下React-Native中的側滑選單DrawerLayoutAnd

編輯文章頁面，修改側邊欄的分類多選框的樣式。

ane admin type cat pan style stty 分類 text function change_cat_meta_postbox_css(){ ?> <style type="text/css"> .wp-tab-panel

【CSS】非常簡單的css實現div懸浮頁面底部

簡單的 fixed style 簡單底部 demo 實現 clas post <div id="demo_div"></div> <style> #demo_div{ 　　　left: 0; positi

【CSS背景圖片頁面自適應充滿螢幕】

實現程式碼： body { overflow: hidden; position: fixed; width:100%; height:100%;

【css】導航欄小結(一)-----簡單導航

導航欄=連結列表導航條基本上是一個連結列表，所以使用 <ul> 和 <li>元素非常有意義： 1).垂直導航欄只需要設定<a> 元素的樣式，就可以建議一個垂直導航欄。注意請務必指定 <a>元素在垂直

js 分享到側邊欄

htm func line target 判斷 rip mouse get pad <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

WordPress主題開發實例：利用側邊欄工具顯示聯系方式

des dynamic class cat ons eba 廈門市 wordpress .com 利用側邊欄顯示聯系方式是很方便的一、先開啟側邊欄工具，在functions.php加上 $args = array( ‘name‘ =

【css】回想下經典的布局

範圍使用 you 方式窮舉 add height 設置蘊含　　看到這張圖相信大多數人都很熟悉，這曾經是一種經典的布局方式，一道經典的面試題，但是隨著歲月的流轉，時光的交替（頗有一種“天下風雲出我輩，一入江湖歲月催”的感慨，哈哈），它一步步逐漸退出了歷史舞臺，不過在

【JavaScript】離開頁面前提示

bin clas 什麽 || pos 窗體 art 提示 java 離開頁面前的提示不能夠用onunload去做，由於它僅僅是兼容IE，你要兼容Google與FireFox就蛋疼了。並且這個事件還是關閉之後才會觸發的。取而代之能夠用onbeforeunloa

ecshop 前臺個人中心修改側邊欄和側邊欄顯示不全或導航現實不全

page alt keyword list() com ade 模板 pla uid 怎麽給個人中心側邊欄加項或者減項在模板文件default/user_menu.lbi 文件裏添加或者修改,一般看到頁面都會知道怎麽加,怎麽刪,這裏就不啰嗦了添加一個欄目以

WordPress窗體化側邊欄

什麽拖拉 bar deb 整理教程不用 wid pre 窗體化側邊欄是一個支持 Widget 的側邊欄或者說是窗體化（widgetized）的側邊欄幾乎是 WordPress 主題的標準。首先，什麽是窗體化（widgetizing）呢？簡單的說，窗體化就是能夠通過拖

【css】選擇器

通配符選擇器標簽、通配符選擇器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽選擇器</title> <styl

【CSS】簡易的頁面側邊欄導航

相關推薦