html5手機端的點選彈出側邊滑動選單程式碼

阿新 • • 發佈：2019-01-19

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <title>jQuery彈出側邊欄滑動選單 - 何問起</title 
><base target="_blank" />
 8 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/reset.css">
 9 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/style.css">
10 
11 <script language="javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></ 
script>
12 <script language="javascript" src="js/main.js"></script>
13 <!--[if IE]>
14 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>>
15 <![endif]-->
16 </head>
17 <body>
18 
19 <main>
20 <header class="header" 
>
21 <h1>jQuery彈出側邊欄滑動選單 <span>A Full-Screen Pushing Navigation</span></h1>
22 <p>A full page menu, that replaces the current content by pushing it off the screen.</p>
23 <p><a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/manpingmenu.htm">原文</a>
24 </p>
25 </header>
26 </main>
27 
28 <a href="#cd-nav" class="cd-nav-trigger">
29 Menu
30 <span class="cd-nav-icon"></span>
31 <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
32 <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
33 </svg>
34 </a>
35 
36 
37 <div id="cd-nav" class="cd-nav">
38 <div class="cd-navigation-wrapper">
39 <div class="cd-half-block">
40 <h2>導航選單</h2>
41 
42 <nav>
43 <ul class="cd-primary-nav">
44 <li><a href="http://hovertree.com/h/bjaf/menulayer.htm" class="selected">我的</a></li>
45 <li><a href="http://hovertree.com/h/bjaf/easysector.htm">內容</a></li>
46 <li><a href="http://hovertree.com/h/bjaf/jqguding.htm">訊息</a></li>
47 <li><a href="http://hovertree.com/h/bjaf/csshouse.htm">模板</a></li>
48 <li><a href="http://hovertree.com/hvtart/bjae/ipblia78.htm">設定</a></li>
49 <li><a href="http://hovertree.com/h/bjaf/tcpip_addressing.htm">關於</a></li>
50 </ul>
51 </nav>
52 </div>
53 
54 <div class="cd-half-block">
55 <address>
56 <ul class="cd-contact-info">
57 <li><a href="mailto:[email protected]">[email protected]</a></li>
58 <li>021-00000000</li>
59 <li>
60 <span>何問起</span>
61 <span>hovertree.com</span>
62 <span>keleyi選單</span>
63 </li>
64 </ul>
65 </address>
66 </div>
67 </div>
68 </div>
69 </body>
70 </html>

html5手機端的點選彈出側邊滑動選單程式碼

1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="

jQuery彈出側邊欄滑動選單實現思路

昨天下午下了一個用jQuery實現彈出側邊欄滑動選單的demo，其實看明白了很簡單，現在把思路整理一下。 js部分：主要用了jQuery的toggleClass()方法，該方法檢查每個元素中指定的類。

在手機端點選input框不彈出輸入法的方法

1、使用CSS樣式： input { pointer-events: none; } 2、使用事件阻止： input.onmousedown = function (e) { e.preve

解決安卓手機軟鍵盤彈出布局的問題

bsp doc html document 軟鍵盤 cti nbsp lur script 一、 js <script type="text/javascript">$(‘body,html‘).height(document.body.clientHeig

JS特效教程：給網站新增滑鼠點選彈出指定漢字特效

網站新增滑鼠點選彈出指定漢字特效，就是滑鼠點選站點任何位置，都會隨機彈出我們指定的一組漢字中的一個。比如指定“文明，自由，民主，公正，和諧”等，點選滑鼠時就會隨機顯示這一組的某個詞語，見下圖：給網站新增滑鼠點選彈出指定漢字特效的操作辦法這個特效不單單適用於 WordPress 部落

劃出側邊欄佈局，DrawLayout

首先要在佈局檔案中，建立DrawerLayout佈局首先要明白側拉出來的佈局是Fragment，所以要先建立一個fragment。在之前DrawerLayout佈局中把他寫出來 <!--次介面,也就是左邊的介面,android:layout_gravity="start"-

vue禁用與啟用以及點選彈出提示框

一·， HTML <tr v-for="(item,index) in showData" :key="index"> <td>{{item.developer_id}}</td&

高德地圖座標點點選彈出框

this.pointSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) { if(e.type === 'pointClick'){ &

安卓手機做自動化彈出：appium android input manager for unicode的安裝

背景： 1：在使用appium+java+Android做自動化時，總會出現appium android input manager for unicode的安裝問題因此，查閱了方法之後，具體使用瞭如下指令，解決了此問題. 解決辦法： hideKeyboard

HTML 在手機軟鍵盤彈出頂起影響頁面佈局

H5在手機端，尤其是安卓手機，如果用了定位或者用了百分比的元素，很容易在鍵盤彈起後引起頁面錯亂，其中分2種情況： **情況1：**在頁面中用了position: fixed; bottom: 0;。把元素定位在頁面的底部，可是這時候鍵盤彈起後，該定位元素也會跟著鍵盤一起彈起。網上大多數答

自定義點選彈出設定百度商橋

我們在使用百度商橋時，有時想通過點選自己的按鈕開啟商橋聊天溝通，此時就可以使用以下方法。 <a class="open_shangqiao" href="javascript:void(0);">彈出百度商橋</a> <script type="text/jav

ArcGIS API for Silverlight開發中滑鼠左鍵點選地圖上的點彈出視窗及右鍵點選彈出快捷選單的實現程式碼

1、首先在SL專案中新增一個抽象類ContextMenu.cs檔案，程式碼如下：using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.

小米等部分手機機型不彈出對話方塊問題

測試又提了一個bug，小米4無法彈出對話方塊，檢視程式碼發現設定的是setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT)，這個沒問題，在其他大部分手

ArcGIS 實現框選區域查詢要素後，要素點選彈出框

提醒說明：本文用了兩種方法，建議直接看第二種，因為第二種比第一種靠譜簡單； 2015.11.12 在webGis 專案的開發中，當前已經實現使用QueryTask來針對要素進行NAME，空間的查詢之後，並使用Symbol將要素顯示出來在圖上，如下圖所

自定義PopupWindow,點選彈出PopupWindow,背景變暗,仿點選彈出分享

注:參照大神程式碼寫的自定義程式碼 package com.duanlian.popupwindowdemo; import android.app.Activity; import android.content.Context; import android.g

解決安卓手機下鍵盤彈出導致頁面變形的問題

我們在製作網頁時，如果使用了百分比，在安卓手機下鍵盤彈出時會導致頁面變形。比正常狀態下的頁面是長成這樣的：但是點選輸入框彈出鍵盤時就變成了這個吊樣：：：

Bootstrap之側邊導航選單(可摺疊分組) 加了點選摺疊

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-

Openlayer 3 的點選彈出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshe

移動web開發手機輸入框彈出的問題

在移動web開發中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發生變化 1、頁面提高背景會出現不夠用的現象，解決方法，在body中設定背景圖，即便是頁面擡升了，背景也依舊存在， 2、底部用fix佈局這個問題會

Qt點選彈出軟鍵盤

在QLineEdit控制元件右鍵，選擇seletionChanged槽函式在槽函式的主體編寫如下 void MainWindow::on_lineEdit_selectionChanged()

html5手機端的點選彈出側邊滑動選單程式碼

相關推薦