您现在的位置是：首页 > 后端

当前栏目

Div+Css(+Js)菜单代码及制作工具

JS 工具 CSS 代码制作菜单 div

2023-06-13 09:13:47 时间

效果直逼flash的Div+Css+Js菜单

css菜单

goodmorning

goodevening

mynameisfireyy

mmmmiloveu

goodmorning

goodevening

mynameisfireyy

mmmmiloveu

另转：5款纯div+css制作的弹出菜单(标准且无js)
一、最基本的：二级dropdown弹出菜单

二级dropdown弹出菜单--ACROSSBROWSERDROPDOWNCASCADINGVALIDATINGMENU /*commonstyling*/ /*setuptheoverallwidthofthemenudiv,thefontandthemargins*/ .menu{ font-family:arial,sans-serif; width:750px; margin:0; margin:50px0; } /*removethebulletsandsetthemarginandpaddingtozerofortheunorderedlist*/ .menuul{ padding:0; margin:0; list-style-type:none; } /*floatthelistsothattheitemsareinalineandtheirpositionrelativesothatthedropdownlistwillappearintherightplaceunderneatheachlistitem*/ .menuulli{ float:left; position:relative; } /*stylethelinkstobe104pxwideby30pxhighwithatopandrightborder1pxsolidwhite.Setthebackgroundcolorandthefontsize.*/ .menuullia,.menuullia:visited{ display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1pxsolid#fff; border-width:1px1px00; background:#c9c9a7; line-height:30px; font-size:11px; } /*makethedropdownulinvisible*/ .menuulliul{ display:none; } /*specifictononIEbrowsers*/ /*setthebackgroundandforegroundcolorofthemainmenulionhover*/ .menuulli:hovera{ color:#fff; background:#b3ab79; } /*makethesubmenuulvisibleandpositionitbeneaththemainmenulistitem*/ .menuulli:hoverul{ display:block; position:absolute; top:31px; left:0; width:105px; } /*stylethebackgroundandforegroundcolorofthesubmenulinks*/ .menuulli:hoverullia{ display:block; background:#faeec7; color:#000; } /*stylethebackgroundandforgroundcolorsofthelinksonhover*/ .menuulli:hoverullia:hover{ background:#dfc184; color:#000; }

DEMOS
- zerodollars
- wrappingtext
- styledform
- activefocus
- shadowboxing
- imagemap
- funbackgrounds
- fadescrolling
- emsizedimages
MENUS
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
LAYOUTS
- Fixed1
- Fixed2
- Fixed3
- Fixed4
- minimumwidth
BOXES
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
MOZILLA
- dropdownmenu
- cascadingmenu
- content:
- mozziebox
- rainbowbox
- snookercue
- targetpractise
- twotoneheadings
- shadowtext
EXPLORER
- exampleone
- weftfonts
- verticalalign
OPACITY
- opaquecolours
- opaquemenu
- partialopacity
- partialopacityII

二、三级dropdown弹出菜单

三级dropdown弹出菜单 /*commonstyling*/ .menu{font-family:arial,sans-serif;width:750px;position:relative;margin:0;font-size:11px;margin:50px0;} .menuullia,.menuullia:visited{display:block;text-decoration:none;color:#000;width:104px;height:20px;text-align:center;color:#fff;border:1pxsolid#fff;background:#710069;line-height:20px;font-size:11px;overflow:hidden;} .menuul{padding:0;margin:0;list-style-type:none;} .menuulli{float:left;margin-right:1px;position:relative;} .menuulliul{display:none;} /*specifictononIEbrowsers*/ .menuulli:hovera{color:#fff;background:#36f;} .menuulli:hoverul{display:block;position:absolute;top:21px;left:0;width:105px;} .menuulli:hoverullia.hide{background:#6a3;color:#fff;} .menuulli:hoverulli:hovera.hide{background:#6fc;color:#000;} .menuulli:hoverulliul{display:none;} .menuulli:hoverullia{display:block;background:#ddd;color:#000;} .menuulli:hoverullia:hover{background:#6fc;color:#000;} .menuulli:hoverulli:hoverul{display:block;position:absolute;left:105px;top:0;} .menuulli:hoverulli:hoverul.left{left:-105px;}

DEMOS
- zerodollars
- wrappingtext
- styledform
- activefocus
- HOVER/CLICK>
  - styledform
  - activefocus
  - hover/click
- shadowboxing
- imagemap
- funbackgrounds
- fadescrolling
- emsizedimages
MENUS
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
LAYOUTS
- Fixed1
- Fixed2
- Fixed3
- Fixed4
- minimumwidth
BOXES
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
MOZILLA
- dropdownmenu
- cascadingmenu
- content:
- mozziebox
- rainbowbox
- snookercue
- targetpractise
- twotoneheadings
- shadowtext
EXPLORER
- exampleone
- weftfonts
- verticalalign
OPACITY
- opaquecolours
- opaquemenu
- partialopacity
- partialopacityII
- <HOVER/CLICK
- styledform
- activefocus
- hover/click

三、flyout-竖向三级弹出菜单

flyout-竖向三级弹出菜单 /*commonstyling*/ .menu{font-family:arial,sans-serif;width:106px;height:150px;position:relative;margin:0;font-size:11px;margin:50px0;} .menuullia,.menuullia:visited{display:block;text-decoration:none;color:#000;width:104px;height:20px;text-align:center;color:#fff;border:1pxsolid#aaa;background:#710069;line-height:20px;font-size:11px;overflow:hidden;} .menuul{padding:0;margin:0;list-style-type:none;} .menuulli{float:left;margin-right:1px;position:relative;} .menuulliul{display:none;} /*specifictononIEbrowsers*/ .menuulli:hovera{color:#fff;background:#36f;} .menuulli:hoverul{display:block;position:absolute;top:0;left:105px;width:105px;} .menuulli:hoverullia.hide{background:#6a3;color:#fff;} .menuulli:hoverulli:hovera.hide{background:#6fc;color:#000;} .menuulli:hoverulliul{display:none;} .menuulli:hoverullia{display:block;background:#eee;color:#000;} .menuulli:hoverullia:hover{background:#6fc;color:#000;} .menuulli:hoverulli:hoverul{display:block;position:absolute;left:105px;top:0;}

DEMOS
- zerodollars
- wrappingtext
- styledform
- activefocus
- HOVER/CLICK>
  - styledform
  - activefocus
  - hover/click
- shadowboxing
- imagemap
- funbackgrounds
- fadescrolling
- emsizedimages
MENUS
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
LAYOUTS
- Fixed1
- Fixed2
- Fixed3
- Fixed4
- minimumwidth
BOXES
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
MOZILLA
- dropdownmenu
- cascadingmenu
- content:
- mozziebox
- rainbowbox
- snookercue
- targetpractise
- twotoneheadings
- shadowtext
EXPLORER
- exampleone
- weftfonts
- verticalalign
OPACITY
- opaquecolours
- opaquemenu
- partialopacity
- partialopacityII

四、dropline-水平三级横向弹出菜单

dropline-水平三级横向弹出菜单 /*commonstyling*/ .menu{font-family:arial,sans-serif;width:749px;height:30px;position:relative;margin:0;font-size:11px;margin:50px0;background:#fff;position:relative;} .menuul{padding:0;margin:0;list-style-type:none;} .menuulli{float:left;border-left:1pxsolid#eee;width:106px;} .menuullia,.menuullia:visited{display:block;float:left;width:101px;text-decoration:none;padding:0005px;height:30px;line-height:30px;color:#000;background:#c9c9a7url(../../graphics/drop.gif)bottomrightno-repeat;} .menuulliul{display:none;} /*specifictononIEbrowsers*/ .menuulli:hovera{color:#fff;background:#b3ab79;} .menuulli:hoverul{display:block;position:absolute;width:749px;top:30px;left:0;background:#b3ab79;color:#fff;} .menuulli:hoverul.right_sideli{float:right;border:0;border-left:1pxsolid#eee;} .menuulli:hoverul.left_sideli{float:left;border:0;border-left:1pxsolid#eee;} .menuulli:hoverullia.hide{background:#bd8d5eurl(../../graphics/drop2.gif)bottomrightno-repeat;color:#fff;} .menuulli:hoverulli:hovera.hide{background:#b3ab79;color:#fff;} .menuulli:hoverulliul{display:none;} .menuulli:hoverullia{display:block;background:##b3ab79;color:#fff;} .menuulli:hoverullia:hover{background:#dfc184;color:#000;} .menuulli:hoverulli:hoverul{display:block;position:absolute;left:0;top:30px;color:#000;background:#dfc184;} .menuulli:hoverul.rightli{float:right;} .menuulli:hoverulli:hovera.hide{background:#dfc184;color:#000;} .menuulli:hoverulli:hoverullia{background:#dfc184;color:#000;} .menuulli:hoverulli:hoverullia:hover{background:#bd8d5e;color:#fff;}

DEMOS
- zerodollars
- wrappingtext
- styledform
- activefocus
- HOVER/CLICK
- styledform
- activefocus
- hover/click
shadowboxing
imagemap

MENUS

spiesmenu
verticalmenu
enlarginglist
linkimages
non-rectangular
jigsawlinks
circularlinks

LAYOUTS

Fixed1
Fixed2
Fixed3
Fixed4
minimumwidth

BOXES

spiesmenu
verticalmenu
enlarginglist
linkimages
non-rectangular
jigsawlinks
circularlinks

MOZILLA

dropdownmenu
cascadingmenu
content:
mozziebox
rainbowbox
snookercue
targetpractise

EXPLORER

exampleone

weftfonts

verticalalign

OPACITY

opaquecolours

opaquemenu

partialopacity

partialopacityII

HOVER/CLICK

styledform

activefocus

hover/click

五、upmenu-水平竖弹向上三级弹出菜单

upmenu-水平竖弹向上三级弹出菜单 /*commonstyling*/ .menu{font-family:verdana,arial,sans-serif;width:735px;position:relative;font-size:11px;margin:50pxauto;} .menuullia,.menuullia:visited{display:block;text-decoration:none;width:94px;height:25px;text-align:left;color:#000;padding-left:10px;border:1pxsolid#fff;border-width:01px1px0;background:#c9c9a7;line-height:25px;font-size:11px;} .menuul{padding:0;margin:0;list-style-type:none;} .menuulli{float:left;position:relative;} .menuulliul{display:none;} /*specifictononIEbrowsers*/ .menuulli:hovera{color:#000;background:#e9e9c7;} .menuulli:hoverul{display:block;position:absolute;bottom:26px;left:0;} .menuulli:hoverullia.hide{background:#a7c9c9;color:#000;} .menuulli:hoverulli{display:block;background:#fff;color:#000;width:199px;clear:both;} .menuulli:hoverulli:hovera.hide{background:#dfc184;color:#000;} .menuulli:hoverulliul{display:none;} .menuulli:hoverullia{display:block;background:#c9a7c9;color:#000;width:100%;padding-left:10px;} .menuulli:hoverullia:hover{background:#dfc184;color:#000;} .menuulli:hoverulli:hoverul{display:block;position:absolute;left:210px;bottom:0;} .menuulli:hoverulli:hoverullia{background:#dfc184;color:#000;} .menuulli:hoverulli:hoverullia:hover{background:#c9c9a7;color:#000;} .menuulli:hoverul.left{left:-105px;} .menuulli:hoverulli:hoverul.left{left:-210px;width:209px;}

DEMOS
- zerodollars
- wrappingtext
- styledform
- activefocus
- HOVER/CLICK>
  - styledform
  - activefocus
  - hover/click
- shadowboxing
- imagemap
- funbackgrounds
- fadescrolling
- emsizedimages
MENUS
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
LAYOUTS
- Fixed1
- Fixed2
- Fixed3
- Fixed4
- minimumwidth
BOXES
- spiesmenu
- verticalmenu
- enlarginglist
- linkimages
- non-rectangular
- jigsawlinks
- circularlinks
MOZILLA
- dropdownmenu
- cascadingmenu
- content:
- mozziebox
- rainbowbox
- snookercue
- targetpractise
- twotoneheadings
- shadowtext
EXPLORER
- exampleone
- weftfonts
- verticalalign
OPACITY
<HOVER/CLICK
styledform
activefocus
hover/click

opaquecolours

opaquemenu

partialopacity

partialopacityII

如果你很厌烦来研究、修改代码，那么这里有款软件制作基于DIV+CSS的各类菜单效果（能整合到DREAMWEAVER中将是件多么让人高兴的事）。

软件下载：http://dl.filekicker.com/send/file/175939-ALVX/css_tab.zip

该软件介绍：http://www.highdots.com/css-tab-designer/

下载地址页面：http://www.highdots.com/download.html

猜你喜欢

python的id()函数介绍
pg数据库系统表详解数据库
WordPress 技巧：给 Admin Bar 添加自定义链接
nginx配置详解
JAVA秒会技术之玩转PDFIText转PDF秒会详解编程语言
如何查看mysql日志文件位置_mysql的日志文件在哪里
linux云服务搭建七日杀服务器的详细流程
MySQL Error number: MY-011357; Symbol: ER_KEYRING_FAILED_TO_GENERATE_KEY; SQLSTATE: HY000 报错故障修复远程处理
你能给前端工程化下个定义么？
Linux ncat：轻松实现网络连接与数据交换（linuxncat）
Linux下载的技巧：5分钟轻松搞定！（linux如何下载）
利用 Python 爬取网站的新手指南

zl程序教程

当前栏目

Div+Css(+Js)菜单代码及制作工具

相关文章