1. 程式人生 > >CSS實現彈出導航選單

CSS實現彈出導航選單

完整程式碼,儲存在html檔案開啟也可看到效果:

<!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>CSS導航條-柯樂義</title><base target="_blank" />


<style>
ul,li{ margin:0px; padding:0px; list-style:none;}
.div_a{ width:300px; float:left;}
.div_a li{ width:300px; height:50px; border-bottom:1px solid #fff; cursor:pointer; background-color:#060; text-align:center; line-height:50px; font-size:18px; color:#fff;}
.div_a1-keleyi-com{ width:300px; height:100px; position:relative; background-color:#F00; top:-50px; left:250px; z-index:999; display:none;}

.div_a li:hover .div_a1-keleyi-com{ display:block;}.div_a a{ color:white;}
</style>
</head>
<body>
<div class="div_a">
<ul>
<li><a href="http://keleyi.com/menu/aspnet/">ASP.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">基於微軟.NET的程式設計平臺</a></div></li>

<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">PHP</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">使用最多的WEB開發語言</a></div></li>
<li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">AJAX</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/182di68b.htm">實現網頁互動式設計</a><br /><a href="http://keleyi.com/a/bjac/13639353acde40c.htm">左側可彈出隱藏div</a></div></li>
<li><a href="http://keleyi.com/menu/csharp/">C#.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/menu/net/">新一代微軟平臺程式語言</a></div></li>
<li><a href="http://keleyi.com/menu/javascript/">JAVA</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/9a9irmcm.htm">最有前途的程式語言</a></div></li>
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">DELPHI</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm">最具潛力的程式語言</a></div></li>
</ul>
</div><!--柯 樂 義-->
</body>
</html>

相關推薦

CSS實現導航選單

完整程式碼,儲存在html檔案開啟也可看到效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

css實現視窗始終垂直水平居中

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <title>螞蟻

CSS實現自定義導航欄帶二級選單

程式碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

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

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

webview長按點選實現選單

最近有一個需求,當長按點選webview,彈出選單欄,這是系統預設的有複製,全選,搜尋等功能,而不能滿足公司需求,同時公司需要將分享和搜尋功能去掉,新增自己的選單: 新增自己的功能,自定義webview,複寫下邊兩個方法: @Override public ActionMo

選單(下拉選單實現——PopupMenu

PopupMenu代表彈出式選單,它會在指定元件上彈出PopupMenu,預設情況下,PopupMenu會顯示在該元件的下方或上方。PopupMenu可增加多個選單項,並可為選單項增加子選單。 使用PopupMenu建立選單的步驟非常簡單,只要如下步驟即可。 呼叫new PopupMenu(Context c

android學習筆記之下拉動態圖示選單實現

首先在佈局上放幾個重疊的圖示 private int res[] = {R.id.i0, R.id.i1, R.id.i2, R.id.i3, R.id.i4, R.id.i5};然後設定最上邊圖示的點選事件 應用屬性動畫,並設定插值器 animator.setInt

Android setOnCreateContextMenuListener實現長按ListItem不同選單

    前一段時間做專案需要做一個效果:一個ListActivity,長按不同的item彈出的選單不一樣;如下圖所示我們長按不同的item需要彈出不同標題的menu:     長按事件可以使用ListView的setOnItemLongClick函式進行關聯,但是在響應的onItemLongClick函式裡面

實現層,遮罩層

point func relative cit get alpha fun javascrip pla 開發中經常會用到彈出遮罩層的時候,下面是一個簡單的遮罩層彈窗 <style type="text/css"> <

使用css實現移動端導航條滾動

動態 inline -i 使用 div 導航條 底部 ble pac 1 <div class="tab"> 2 <div class="table-item"> 3 <span class="tab-link">首頁

AngularJS進階(六)AngularJS+BootStrap實現對話方塊

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

如何用jQuery實現一個層然後過3秒鐘後自動變淡然後消失

<!DOCTYPE HTML> < html > < head > < meta  charset = UTF -8> &l

Flutter - 底部選單Show Modal Bottom Sheet

在很多安卓App上,有很多底部彈出的選單,這個在Flutter上同樣可以實現。 先看一下效果   嗯,就是這樣子的,當用戶點選選單區域以外的時候,選單會自動關閉。 下面就看一下Dart語言實現   floatingActionButton: new FloatingA

利用layer實現層效果

先看效果: 第一步:下載彈出層外掛 地址:https://layer.layui.com/ 大概這個樣子: 我用的tp5框架,記住要把下載的所有的這些檔案都放在框架裡面:不然會沒樣式!!!! 第二步:程式碼實現 index.html <

移動端實現框漸顯和漸隱效果

在移動端想實現一個彈出框漸漸出現和消失的效果。由於用的是vue.js,所以寫法有些獨特,用變數控制是否顯示類名。但是核心解決方法就是CSS3的animation屬性應用還有CSS中的z-index應用,必須初始化定義讓彈出框在最底部。還有就是opacity屬性的應用,這樣才有漸健彈出和漸漸消失的效果。給彈出框

微信公眾號頁面禁止長按系統選單,相容ios和安卓

最近做的一個微信公眾號需求,需要長按撥出有刪除按鈕的浮層,可是長按的時候也會彈出系統選單“選擇複製”和“在瀏覽器開啟”,這裡記錄一下解決方案。 css程式碼如下: cssSelect{ //這裡為css選擇器 -webkit-touch-callout:non

html與css實現窗效果

彈窗由html、css組成,通過js控制彈窗 html程式碼: <div class="btn_select">//刪除儲存按鈕 <ul> <li>

openlayers3實現

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Android 底部選擇選單ActionSheet

對於各式各樣的選擇選單彈框可以使用很多中方式來實現,下面我們來看看ActionSheet是如何實現的: 一.第三方ActionSheet實現方法: compile 'com.baoyz.actionsheet:library:1.1.4' 1.新增以上依賴,實現下面

使用JavaScript實現層效果的簡單例項

轉自:https://www.jb51.net/article/85475.htm 實現彈出層效果的思路非常簡單:將待顯示的內容先隱藏,在觸發某種條件後(如點選按鈕),將原本隱藏的內容顯示出來。 實現 ?