css布局实现多种下拉菜单导航显示效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现多种下拉菜单导航显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* ========================================================================== NMC Bootstrap This LESS file imports all other LESS files. You should compile and minify this file before site launch. ========================================================================== */ /* Import NMC bootstrap */ /** * html5doctor.com Reset Stylesheet * v1.6.1 * Last Updated: 2010-09-17 * Author: Richard Clark - http://richclarkdesign.com * Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /*--------------------------------------------------- LESS Prefixer --------------------------------------------------- All of the CSS3 fun, none of the prefixes! As a rule, you can use the CSS properties you would expect just by adding a '.': box-shadow => .box-shadow(@args) Also, when shorthand is available, arguments are not parameterized. Learn CSS, not LESS Prefixer. ------------------------------------------------- TABLE OF CONTENTS (*) denotes a syntax-sugar helper ------------------------------------------------- .animation(@args) .animation-delay(@delay) .animation-direction(@direction) .animation-duration(@duration) .animation-iteration-count(@count) .animation-name(@name) .animation-play-state(@state) .animation-timing-function(@function) .background-size(@args) .border-radius(@args) .box-shadow(@args) .inner-shadow(@args) * .box-sizing(@args) .border-box() * .content-box() * .columns(@args) .column-count(@count) .column-gap(@gap) .column-rule(@args) .column-width(@width) .gradient(@default,@start,@stop) * .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* .opacity(@factor) .transform(@args) .rotate(@deg) .scale(@factor) .translate(@x,@y) .translate3d(@x,@y,@z) .translateHardware(@x,@y) * .text-shadow(@args) .transition(@args) .transition-delay(@delay) .transition-duration(@duration) .transition-property(@property) .transition-timing-function(@function) Credit to LESS Elements for the motivation and to CSS3Please.com for implementation. Copyright (c) 2012 Joel Sutherland MIT Licensed: https://www.opensource.org/licenses/mit-license.php -----------------------------------------------------*/ /* Animation */ /* Background Size */ /* Border Radius */ /* Box Shadows */ /* Box Sizing */ /* Columns */ /* Gradients */ /* Opacity */ /* Text Shadow */ /* Transforms */ /* Transitions */ /** * New Media Campaigns Idioms * * These are common patterns we use in all of our * projects. They are consolidated here to keep code DRY. * * Listing * * .noText,.textReplace * * .noList * * .noForm * * .fixedWidth(@width) * * .columnWidth(@width) * * .columnLeft(@width) * * .columnRight(@width) * * .fullSize * * .absoluteDefault * * .absoluteFullSize * * .clearFix */ /* Hides text when using image replacement */ .noText, .textReplace { overflow: hidden; text-indent: 100%; white-space: nowrap; } /* Removes bullets, margin, and padding from list */ .noList { list-style: none; margin: 0; padding: 0; } /* Removes webkit styling from form element */ .noForm { border: none; margin: 0; padding: 0; -webkit-appearance: none; } /* Center a fixed width container */ /* Adds left or right columns (e.g. content and sidebar) */ /* Set width and height of element to that of its parent */ .fullSize { height: 100%; width: 100%; } /* Position element absolutely to 0,0 */ .absoluteDefault { position: absolute; left: 0; top: 0; } /* Position element absolutely and set its width and height to that of its parent (useful for slideshows) */ .absoluteFullSize { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearFix { *zoom: 1; } .clearFix:before, .clearFix:after { content: ""; display: table; } .clearFix:after { clear: both; } /** * Spacing * * This LESS file defines margins and paddings for block-level * elements. Helper classes are included for use elsewhere * in site styles. */ /* Settings */ /** * Spacing * p, m, lh = padding, margin, line-height * a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical * n, h, s, d = none(0px), half(@baseline / 2), single(@baseline), double(@baseline * 2), none(0px) * i = ! important */ .ptn { padding-top: 0px; } .ptni { padding-top: 0px !important; } .pbn { padding-bottom: 0px; } .pbni { padding-bottom: 0px !important; } .pln { padding-left: 0px; } .plni { padding-left: 0px !important; } .prn { padding-right: 0px; } .prni { padding-right: 0px !important; } .pvn { padding-top: 0px; padding-bottom: 0px; } .pvni { padding-top: 0px !important; padding-bottom: 0px !important; } .phn { padding-left: 0px; padding-right: 0px; } .phni { padding-left: 0px !important; padding-right: 0px !important; } .pan { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } .pani { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } .mtn { margin-top: 0px; } .mtni { margin-top: 0px !important; } .mbn { margin-bottom: 0px; } .mbni { margin-bottom: 0px !important; } .mln { margin-left: 0px; } .mlni { margin-left: 0px !important; } .mrn { margin-right: 0px; } .mrni { margin-right: 0px !important; } .mvn { margin-top: 0px; margin-bottom: 0px; } .mvni { margin-top: 0px !important; margin-bottom: 0px !important; } .mhn { margin-left: 0px; margin-right: 0px; } .mhni { margin-left: 0px !important; margin-right: 0px !important; } .man { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } .mani { margin-top: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; } .lhn { line-height: 0px; } .lhni { line-height: 0px !important; } .ptq { padding-top: 4px; } .ptqi { padding-top: 4px !important; } .pbq { padding-bottom: 4px; } .pbqi { padding-bottom: 4px !important; } .plq { padding-left: 4px; } .plqi { padding-left: 4px !important; } .prq { padding-right: 4px; } .prqi { padding-right: 4px !important; } .pvq { padding-top: 4px; padding-bottom: 4px; } .pvqi { padding-top: 4px !important; padding-bottom: 4px !important; } .phq { padding-left: 4px; padding-right: 4px; } .phqi { padding-left: 4px !important; padding-right: 4px !important; } .paq { padding-top: 4px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; } .paqi { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 4px !important; padding-right: 4px !important; } .mtq { margin-top: 4px; } .mtqi { margin-top: 4px !important; } .mbq { margin-bottom: 4px; } .mbqi { margin-bottom: 4px !important; } .mlq { margin-left: 4px; } .mlqi { margin-left: 4px !important; } .mrq { margin-right: 4px; } .mrqi { margin-right: 4px !important; } .mvq { margin-top: 4px; margin-bottom: 4px; } .mvqi { margin-top: 4px !important; margin-bottom: 4px !important; } .mhq { margin-left: 4px; margin-right: 4px; } .mhqi { margin-left: 4px !important; margin-right: 4px !important; } .maq { margin-top: 4px; margin-bottom: 4px; margin-left: 4px; margin-right: 4px; } .maqi { margin-top: 4px !important; margin-bottom: 4px !important; margin-left: 4px !important; margin-right: 4px !important; } .lhq { line-height: 4px; } .lhqi { line-height: 4px !important; } .pth { padding-top: 8px; } .pthi { padding-top: 8px !important; } .pbh { padding-bottom: 8px; } .pbhi { padding-bottom: 8px !important; } .plh { padding-left: 8px; } .plhi { padding-left: 8px !important; } .prh { padding-right: 8px; } .prhi { padding-right: 8px !important; } .pvh { padding-top: 8px; padding-bottom: 8px; } .pvhi { padding-top: 8px !important; padding-bottom: 8px !important; } .phh { padding-left: 8px; padding-right: 8px; } .phhi { padding-left: 8px !important; padding-right: 8px !important; } .pah { padding-top: 8px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .pahi { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 8px !important; padding-right: 8px !important; } .mth { margin-top: 8px; } .mthi { margin-top: 8px !important; } .mbh { margin-bottom: 8px; } .mbhi { margin-bottom: 8px !important; } .mlh { margin-left: 8px; } .mlhi { margin-left: 8px !important; } .mrh { margin-right: 8px; } .mrhi { margin-right: 8px !important; } .mvh { margin-top: 8px; margin-bottom: 8px; } .mvhi { margin-top: 8px !important; margin-bottom: 8px !important; } .mhh { margin-left: 8px; margin-right: 8px; } .mhhi { margin-left: 8px !important; margin-right: 8px !important; } .mah { margin-top: 8px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; } .mahi { margin-top: 8px !important; margin-bottom: 8px !important; margin-left: 8px !important; margin-right: 8px !important; } .lhh { line-height: 8px; } .lhhi { line-height: 8px !important; } .pts { padding-top: 16px; } .ptsi { padding-top: 16px !important; } .pbs { padding-bottom: 16px; } .pbsi { padding-bottom: 16px !important; } .pls { padding-left: 16px; } .plsi { padding-left: 16px !important; } .prs { padding-right: 16px; } .prsi { padding-right: 16px !important; } .pvs { padding-top: 16px; padding-bottom: 16px; } .pvsi { padding-top: 16px !important; padding-bottom: 16px !important; } .phs { padding-left: 16px; padding-right: 16px; } .phsi { padding-left: 16px !important; padding-right: 16px !important; } .pas { padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; } .pasi { padding-top: 16px !important; padding-bottom: 16px !important; padding-left: 16px !important; padding-right: 16px !important; } .mts { margin-top: 16px; } .mtsi { margin-top: 16px !important; } .mbs { margin-bottom: 16px; } .mbsi { margin-bottom: 16px !important; } .mls { margin-left: 16px; } .mlsi { margin-left: 16px !important; } .mrs { margin-right: 16px; } .mrsi { margin-right: 16px !important; } .mvs { margin-top: 16px; margin-bottom: 16px; } .mvsi { margin-top: 16px !important; margin-bottom: 16px !important; } .mhs { margin-left: 16px; margin-right: 16px; } .mhsi { margin-left: 16px !important; margin-right: 16px !important; } .mas { margin-top: 16px; margin-bottom: 16px; margin-left: 16px; margin-right: 16px; } .masi { margin-top: 16px !important; margin-bottom: 16px !important; margin-left: 16px !important; margin-right: 16px !important; } .lhs { line-height: 16px; } .lhsi { line-height: 16px !important; } .pt3h { padding-top: 24px; } .pt3hi { padding-top: 24px !important; } .pb3h { padding-bottom: 24px; } .pb3hi { padding-bottom: 24px !important; } .pl3h { padding-left: 24px; } .pl3hi { padding-left: 24px !important; } .pr3h { padding-right: 24px; } .pr3hi { padding-right: 24px !important; } .pv3h { padding-top: 24px; padding-bottom: 24px; } .pv3hi { padding-top: 24px !important; padding-bottom: 24px !important; } .ph3h { padding-left: 24px; padding-right: 24px; } .ph3hi { padding-left: 24px !important; padding-right: 24px !important; } .pa3h { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .pa3hi { padding-top: 24px !important; padding-bottom: 24px !important; padding-left: 24px !important; padding-right: 24px !important; } .mt3h { margin-top: 24px; } .mt3hi { margin-top: 24px !important; } .mb3h { margin-bottom: 24px; } .mb3hi { margin-bottom: 24px !important; } .ml3h { margin-left: 24px; } .ml3hi { margin-left: 24px !important; } .mr3h { margin-right: 24px; } .mr3hi { margin-right: 24px !important; } .mv3h { margin-top: 24px; margin-bottom: 24px; } .mv3hi { margin-top: 24px !important; margin-bottom: 24px !important; } .mh3h { margin-left: 24px; margin-right: 24px; } .mh3hi { margin-left: 24px !important; margin-right: 24px !important; } .ma3h { margin-top: 24px; margin-bottom: 24px; margin-left: 24px; margin-right: 24px; } .ma3hi { margin-top: 24px !important; margin-bottom: 24px !important; margin-left: 24px !important; margin-right: 24px !important; } .lh3h { line-height: 24px; } .lh3hi { line-height: 24px !important; } .ptd { padding-top: 32px; } .ptdi { padding-top: 32px !important; } .pbd { padding-bottom: 32px; } .pbdi { padding-bottom: 32px !important; } .pld { padding-left: 32px; } .pldi { padding-left: 32px !important; } .prd { padding-right: 32px; } .prdi { padding-right: 32px !important; } .pvd { padding-top: 32px; padding-bottom: 32px; } .pvdi { padding-top: 32px !important; padding-bottom: 32px !important; } .phd { padding-left: 32px; padding-right: 32px; } .phdi { padding-left: 32px !important; padding-right: 32px !important; } .pad { padding-top: 32px; padding-bottom: 32px; padding-left: 32px; padding-right: 32px; } .padi { padding-top: 32px !important; padding-bottom: 32px !important; padding-left: 32px !important; padding-right: 32px !important; } .mtd { margin-top: 32px; } .mtdi { margin-top: 32px !important; } .mbd { margin-bottom: 32px; } .mbdi { margin-bottom: 32px !important; } .mld { margin-left: 32px; } .mldi { margin-left: 32px !important; } .mrd { margin-right: 32px; } .mrdi { margin-right: 32px !important; } .mvd { margin-top: 32px; margin-bottom: 32px; } .mvdi { margin-top: 32px !important; margin-bottom: 32px !important; } .mhd { margin-left: 32px; margin-right: 32px; } .mhdi { margin-left: 32px !important; margin-right: 32px !important; } .mad { margin-top: 32px; margin-bottom: 32px; margin-left: 32px; margin-right: 32px; } .madi { margin-top: 32px !important; margin-bottom: 32px !important; margin-left: 32px !important; margin-right: 32px !important; } .lhd { line-height: 32px; } .lhdi { line-height: 32px !important; } .pt5h { padding-top: 40px; } .pt5hi { padding-top: 40px !important; } .pb5h { padding-bottom: 40px; } .pb5hi { padding-bottom: 40px !important; } .pl5h { padding-left: 40px; } .pl5hi { padding-left: 40px !important; } .pr5h { padding-right: 40px; } .pr5hi { padding-right: 40px !important; } .pv5h { padding-top: 40px; padding-bottom: 40px; } .pv5hi { padding-top: 40px !important; padding-bottom: 40px !important; } .ph5h { padding-left: 40px; padding-right: 40px; } .ph5hi { padding-left: 40px !important; padding-right: 40px !important; } .pa5h { padding-top: 40px; padding-bottom: 40px; padding-left: 40px; padding-right: 40px; } .pa5hi { padding-top: 40px !important; padding-bottom: 40px !important; padding-left: 40px !important; padding-right: 40px !important; } .mt5h { margin-top: 40px; } .mt5hi { margin-top: 40px !important; } .mb5h { margin-bottom: 40px; } .mb5hi { margin-bottom: 40px !important; } .ml5h { margin-left: 40px; } .ml5hi { margin-left: 40px !important; } .mr5h { margin-right: 40px; } .mr5hi { margin-right: 40px !important; } .mv5h { margin-top: 40px; margin-bottom: 40px; } .mv5hi { margin-top: 40px !important; margin-bottom: 40px !important; } .mh5h { margin-left: 40px; margin-right: 40px; } .mh5hi { margin-left: 40px !important; margin-right: 40px !important; } .ma5h { margin-top: 40px; margin-bottom: 40px; margin-left: 40px; margin-right: 40px; } .ma5hi { margin-top: 40px !important; margin-bottom: 40px !important; margin-left: 40px !important; margin-right: 40px !important; } .lh5h { line-height: 40px; } .lh5hi { line-height: 40px !important; } .ptt { padding-top: 48px; } .ptti { padding-top: 48px !important; } .pbt { padding-bottom: 48px; } .pbti { padding-bottom: 48px !important; } .plt { padding-left: 48px; } .plti { padding-left: 48px !important; } .prt { padding-right: 48px; } .prti { padding-right: 48px !important; } .pvt { padding-top: 48px; padding-bottom: 48px; } .pvti { padding-top: 48px !important; padding-bottom: 48px !important; } .pht { padding-left: 48px; padding-right: 48px; } .phti { padding-left: 48px !important; padding-right: 48px !important; } .pat { padding-top: 48px; padding-bottom: 48px; padding-left: 48px; padding-right: 48px; } .pati { padding-top: 48px !important; padding-bottom: 48px !important; padding-left: 48px !important; padding-right: 48px !important; } .mtt { margin-top: 48px; } .mtti { margin-top: 48px !important; } .mbt { margin-bottom: 48px; } .mbti { margin-bottom: 48px !important; } .mlt { margin-left: 48px; } .mlti { margin-left: 48px !important; } .mrt { margin-right: 48px; } .mrti { margin-right: 48px !important; } .mvt { margin-top: 48px; margin-bottom: 48px; } .mvti { margin-top: 48px !important; margin-bottom: 48px !important; } .mht { margin-left: 48px; margin-right: 48px; } .mhti { margin-left: 48px !important; margin-right: 48px !important; } .mat { margin-top: 48px; margin-bottom: 48px; margin-left: 48px; margin-right: 48px; } .mati { margin-top: 48px !important; margin-bottom: 48px !important; margin-left: 48px !important; margin-right: 48px !important; } .lht { line-height: 48px; } .lhti { line-height: 48px !important; } /** * Typography * * This LESS file defines the baseline, color, font-size, and other typographical * styles for text elements. */ /* Settings */ /* Base */ html, body { font-family: 'Arial', sans-serif; color: #333333; line-height: 16px; } /* Block-level */ h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, table, form, pre { margin-bottom: 16px; } /* Headers */ h1, h2, h3, h4, h5, h6, .alpha, .beta, .gamma, .delta, .epsilon, .zeta, .giga, .mega, .kilo, .milli { color: #333333; font-family: 'Arial', sans-serif; font-weight: 700; } h1, .alpha { font-size: 1.3125em; line-height: 32px; } h2, .beta { font-size: 1.225em; line-height: 32px; } h3, .gamma { font-size: 1.1375em; } h4, .delta { font-size: 1.05em; margin-bottom: 0px; } h5, .epsilon { font-size: 0.9625em; m.........完整代码请登录后点击上方下载按钮下载查看
网友评论0