CSS3實現側邊欄快速定位的隱藏和消失

阿新 • • 發佈：2018-12-10

Dome

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title>
    <style type="text/css">

        a:link,
        a:hover,
        a:visited,
        a:active {
            color: #fff;
            text-decoration 
: none;
        }

        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #fff;
        }

        .card-holder {
            position: fixed;
            width: 0px;
            overflow: visible;
            right: 0px;
        } 


        .card-wrapper {
            display: inline-block;
            float: right;
            clear: both;
        }

        .card {
            position: relative;
            left: 100px;
            padding: 7px 32px 7px 64px;
            margin-top: 15px;
            x-box-shadow: 0 0 8px 0px rgba 
(0, 0, 0, 0.5);
            box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
            background: #fff;
            transition: all 0.3s ease-in-out 0.1s;
            border-radius: 5px;
        }

        .card:hover {
            position: relative;
            left: 100%;
            margin-left: -100px;
            box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5),
            0 8px 8px -8px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease-in-out;
        }

        .card-content {
            display: inline-block;
            color: #fff;
            font-family: 'Droid Sans', sans-serif;
            font-size: 16px;
            font-weight: bold;
            white-space: nowrap;
            position: relative;
            left: -15px;
        }

        .bg-01 {
            background: #977e78;
        }

    </style>
</head>

<body>

    <div class='card-holder'>
        <div class='card-wrapper'>
            <a href='#'>
                <div class='card bg-01'>
                    <span class='card-content'>更多</span>
                </div>
            </a>
        </div>
    </div>

</body>
</html>

效果：
在這裡插入圖片描述

CSS3實現側邊欄快速定位的隱藏和消失

Dome <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title>

利用css3實現側邊欄

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片

icon -a 儀器 cor 個人 con 圖片 AC 默認實現的效果：默認狀態下：點擊下面的標題時： html代碼： <h2>商品分類</h2> <div class="categories"> <ul cla

關於Qt實現側邊欄隱藏與顯示的效果

通過ToolButton來實現某控制元件的隱藏與顯示，具體功能為點選toolbutton後，某widget（以tabWidget為例）隱藏於左側，toolbutton位於（0，0）座標處，顯示的icon也進行切換；再次點選後，tabwidget展開，toolbutton還原

使用Android DrawLayout實現側邊欄功能

“千呼萬喚始出來，猶抱琵琶半遮面”，白居易的《琵琶行》中，兩句話將琵琶女的難言之痛與羞澀情態描寫的逼真生動，一個抱著琵琶的女子呼之欲出，她的羞澀之美令人久久難以忘懷。生活中有含蓄之美，程式設計也不能將所有的功能一下子全部展示給使用者，當然這也無法實現。這個

wordpress部落格側邊欄滾動定位效果

--廣告位佔位-- 很多wordpress部落格都會有個側邊欄滾動定位效果：當拖動滾動條到第1個臨界值時，一固定區域塊以隨頁面滾動而一直顯示在頁面一固定的視覺區域; 當拖

安卓基於DrawerLayout實現側邊欄實現

效果圖：側邊欄在大多數app中都存在的， mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); //關閉手勢滑動 mDrawer_layout.setDrawerLockMode(Dra

使用django + layui實現側邊欄多級選單的功能

layui本身是個非常棒的前段框架，自帶的也有側邊欄功能，不過不支援多級，子選單也沒有縮排，因此，我做了些調整。樹形選單是通過Django的自定義標籤渲染的。自定義標籤程式碼如下： def is_ancestor(current, menu): """

jquery實現側邊欄手風琴三級導航選單demo

jquery實現側邊欄手風琴三級導航選單效果圖: 引入檔案，font-awesome為字型庫檔案： <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso

jquery實現側邊欄

效果圖如下：主要用了jquery的mouseenter和mouseleave屬性和animate動畫屬性。程式碼為：<!DOCTYPE html> <html> <hea

jquery實現側邊欄左右伸縮

jquery實現點選側邊欄伸縮效果。點選收縮，側邊欄向左收縮，顯示按鈕顯示；點選顯示按鈕，顯示按鈕向左收縮，側邊欄顯示。具體程式碼如下： <!DOCTYPE html> <html

JQuery.HoverDir庫實現側邊欄二級選單

Jquery.hoverDir響應滑鼠移動方向的懸停效果外掛 HTML程式碼 <div id="sidebar"> <div class="mainNavs"> <div class="m

如何在CSDN的側邊欄新增人形時鐘和可愛的小倉鼠

好多人問我部落格左邊的人形時鐘和小倉鼠怎麼新增上去的，我這裡統一回復一下。首先點選部落格管理，進入到部落格欄目，然後下面的新增欄目，把下面的程式碼新增上然後儲存就可以了。人形時鐘程式碼 <div height="120" width="150" align

javascript實現一個簡單的隱藏式側邊欄

常見的隱藏式側邊欄，如分享、聯絡客服等。通過設定速度來實現滑入滑出的動態效果以下是程式碼 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>&l

js實現自動隱藏側邊欄

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

JS實現div的顯示和隱藏側邊欄區域性偽重新整理的實現

效果描述：點選a標籤1，觸發事件open(obj)，顯示div內容1，點選a標籤2，隱藏div內容1,並顯示div內容2……js程式碼：<script language="javascript"> function opens(obj) { for (v

JS側邊欄實現

1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title&g

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄一、效果圖二、原理解析三、原始碼四、專案下載同類文章推薦：更多幹貨關注公眾號：一、效果圖講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。 &nb

Linxu基礎之Ubuntu如何使側邊欄自動隱藏

如果你裝了ubuntu桌面版就會發現預設情況下桌面左邊會有一個側邊欄，從中我們可以啟動一些軟體，但是這個側邊欄一直顯示在桌面左邊不是很美觀，還會佔據桌面的的空間。我們可以使其自動隱藏起來，當我們需要時只要把滑鼠放到桌面左邊它就會出現。 1. 系統設定-外觀開啟系統

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。一.概述 1.頁面功能分析整體上來說，左邊是一個ListView，右邊是一個自定義View，但

CSS3實現側邊欄快速定位的隱藏和消失

相關推薦