带有淡入/淡出转换的CSS包装菜单(导航)
我正在努力改进一个magento主题,我正在使用它作为我的一个网站的基础。我希望导航菜单(包装菜单)进行淡入淡出转换,但是我想在互联网上搜索大约两天,却找不出答案 顺便说一句,我知道代码太脏了,我以后会修好的。我也不会只使用webkit包,我只是想找出一种正确的方法来调整所有浏览器的代码 以下是html:带有淡入/淡出转换的CSS包装菜单(导航),css,menu,wrapper,transition,fade,Css,Menu,Wrapper,Transition,Fade,我正在努力改进一个magento主题,我正在使用它作为我的一个网站的基础。我希望导航菜单(包装菜单)进行淡入淡出转换,但是我想在互联网上搜索大约两天,却找不出答案 顺便说一句,我知道代码太脏了,我以后会修好的。我也不会只使用webkit包,我只是想找出一种正确的方法来调整所有浏览器的代码 以下是html: <nav class="prmd"> <ul id="prmdNav"> <li class="level0 level-top">
<nav class="prmd">
<ul id="prmdNav">
<li class="level0 level-top">
<a href="index.php/"><span>Home</span></a>
</li>
<li class="level0 nav-1 level-top first parent">
<a href="index.php/furniture.html" class="level-top">
<span>Furniture</span>
</a>
<div class="sub-wrapper">
<ul class="level0">
<li>
<ol>
<li class="level1 nav-1-1 first">
<a href="index.php/furniture/living-room.html">
<span>Living Room</span>
</a>
</li>
<li class="level1 nav-1-2 last">
<a href="index.php/furniture/bedroom.html">
<span>Bedroom</span>
</a>
</li>
</ol>
</li>
</ul>
</div>
</li>
<li class="level0 nav-2 level-top parent">
<a href="index.php/electronics.html" class="level-top">
<span>Electronics</span>
</a>
<div class="sub-wrapper">
<ul class="level0">
<li >
<ol>
<li class="level1 nav-2-1 first">
<a href="index.php/electronics/cell-phones.html">
<span>Cell Phones</span>
</a>
</li>
<li class="level1 nav-2-2 parent">
<a href="index.php/electronics/cameras.html">
<span>Cameras</span>
</a>
<div class="sub-wrapper">
<ul class="level1">
<li class="level2 nav-2-2-1 first">
<a href="index.php/electronics/cameras/accessories.html">
<span>Accessories</span>
</a>
</li>
<li class="level2 nav-2-2-2 last">
<a href="index.php/electronics/cameras/digital-cameras.html">
<span>Digital Cameras</span>
</a>
</li>
</ul>
</div>
</li>
<li class="level1 nav-2-3 last parent">
<a href="index.php/electronics/computers.html">
<span>Computers</span>
</a>
<div class="sub-wrapper">
<ul class="level1">
<li class="level2 nav-2-3-3 first">
<a href="index.php/electronics/computers/build-your-own.html">
<span>Build Your Own</span>
</a>
</li>
<li class="level2 nav-2-3-4">
<a href="index.php/electronics/computers/laptops.html">
<span>Laptops</span>
</a>
</li>
<li class="level2 nav-2-3-5">
<a href="index.php/electronics/computers/hard-drives.html">
<span>Hard Drives</span>
</a>
</li>
<li class="level2 nav-2-3-6">
<a href="index.php/electronics/computers/monitors.html">
<span>Monitors</span>
</a>
</li>
<li class="level2 nav-2-3-7">
<a href="index.php/electronics/computers/ram-memory.html">
<span>RAM / Memory</span>
</a>
</li>
<li class="level2 nav-2-3-8">
<a href="index.php/electronics/computers/cases.html">
<span>Cases</span>
</a>
</li>
<li class="level2 nav-2-3-9">
<a href="index.php/electronics/computers/processors.html">
<span>Processors</span>
</a>
</li>
<li class="level2 nav-2-3-10 last">
<a href="index.php/electronics/computers/peripherals.html">
<span>Peripherals</span>
</a>
</li>
</ul>
</div>
</li>
</ol>
</li>
</ul>
</div>
</li>
<li class="level0 nav-3 level-top last parent">
<a href="index.php/apparel.html" class="level-top">
<span>Apparel</span>
</a>
<div class="sub-wrapper">
<ul class="level0">
<li >
<ol>
<li class="level1 nav-3-1 first">
<a href="index.php/apparel/shirts.html">
<span>Shirts</span>
</a>
</li>
<li class="level1 nav-3-2 parent">
<a href="index.php/apparel/shoes.html">
<span>Shoes</span>
</a>
<div class="sub-wrapper">
<ul class="level1">
<li class="level2 nav-3-2-1 first">
<a href="index.php/apparel/shoes/mens.html">
<span>Mens</span>
</a>
</li>
<li class="level2 nav-3-2-2 last">
<a href="index.php/apparel/shoes/womens.html">
<span>Womens</span>
</a>
</li>
</ul>
</div>
</li>
<li class="level1 nav-3-3 last">
<a href="index.php/apparel/hoodies.html">
<span>Hoodies</span>
</a>
</li>
</ol>
</li>
</ul>
</div>
</li>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
以下是CSS代码:
/********** < Navigation */
.nav-container {width:100%; margin:0 auto; position:relative; z-index:10010; }
#navigation_select{display:none; min-width:100% }
nav .nav-top-title, .nav-container .nav-top-title{font-family:'Myriad Pro', sans-serif; font-size:16px; text-align:center; margin:0; display:none !important; }
nav.prmd {width:100%; margin:0 auto; position:relative; z-index:10010; }
#prmdNav { width:780px; margin:31px 0 34px 46px; padding:0; position:relative; border:none; float:left; -webkit-transition: all 0.5s ease;}
/* All Levels */
#prmdNav li { text-align:left; position: static; }
#prmdNav li.over { z-index:998; }
#prmdNav li.parent {}
#prmdNav li a { display:block; text-decoration:none; font-weight:300; }
#prmdNav li a:hover { text-decoration:none; }
#prmdNav li a span { display:block; white-space:nowrap; cursor:pointer; }
#prmdNav li ul a span { white-space:normal; }
/* 1st Level */
#prmdNav>li { float:left; position:relative; margin:0 3px 3px; background-color:white;}
#prmdNav>li>a {-webkit-transition:color 0.2s ease-in-out; position:relative; float:left; padding:0; color:#555; font-size:14px; font-family:"Myriad Pro",sans-serif; font-weight:700; line-height:36px; letter-spacing:-0.1em; text-transform:uppercase; }
#prmdNav>li>a>span{padding:0px 10px; border-top:3px solid transparent; border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:0px;; -webkit-transition:border 0.5s ease;}
#prmdNav>li:hover>a>span,
#prmdNav>li.over>a>span,
#prmdNav>li.active>a>span {border-top:3px solid #f2f2f2; border-left:3px solid #f2f2f2; border-right:3px solid #f2f2f2; border-bottom:0px; background:#fff; }
#prmdNav>li>a:hover {color:#d1bfaa;}
#prmdNav>li:hover,
#prmdNav>li.over,
#prmdNav>li.over>a{z-index:1000;}
#prmdNav>li>a:hover>span,
#prmdNav>li.over>a>span,
#prmdNav>li.active>a>span {}
#prmdNav>li.custom-block>a, #prmdNav>li.custom-block>a>span {cursor:default;}
/* 2nd Level */
/*#prmdNav ul,*/
#prmdNav div.sub-wrapper {position:absolute; z-index:999; width:auto; padding:16px 0; margin:36px 0 0; left:-10000px; background:#fff; border:3px solid #f2f2f2;}
#prmdNav div.sub-wrapper ul { position:static; width:auto;}
/* 3rd+ leven */
/*#prmdNav ul ul,*/
#prmdNav div.sub-wrapper ul div.sub-wrapper { top:-5px; margin:0 0 0 101px; padding:0; width:auto; border:none;
-webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);
box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);}
#prmdNav ul div.sub-wrapper ul{ padding:16px; width:auto; }
#prmdNav ul li { float:none; border:none; width:210px; line-height:28px; position:relative; }
#prmdNav ul li.last {}
#prmdNav ul li a {float:none; padding:0 10px; font-family:Arial, serif; font-size:12px; font-weight:normal; color:#322c29 !important; background:transparent none; }
#prmdNav ul li.active > a {background:#332d2a !important; color:#fff !important; }
#prmdNav ul li.over > a, #prmdNav ul li a:hover {background:#f5f5f5; }
/* Show menu */
#prmdNav li ul.shown-sub,
#prmdNav li div.shown-sub { left:0px; z-index:999; }
#prmdNav li .shown-sub ul.shown-sub,
#prmdNav li .shown-sub li div.shown-sub { left:15px; }
#prmdNav li.custom-block div.sub-wrapper { padding:16px;}
#prmdNav li.custom-block div.sub-wrapper strong {color:#373230; font-family:"Myriad Pro", sans-serif; font-weight:700;}
#prmdNav li.custom-block div.sub-wrapper a { display:inline; color:#383331; float:none; font-weight:300; padding:0px; text-decoration:underline; border:none !important; background:transparent none !important;}
#prmdNav li.custom-block div.sub-wrapper a:hover,
#prmdNav li.custom-block div.sub-wrapper>ul>li a:hover,
#prmdNav li.custom-block div.sub-wrapper ul li.over > a{ color:#383331 !important; text-decoration:none; background:transparent none !important;}
#prmdNav li.custom-block div.sub-wrapper>ul, #prmdNav li.custom-block div.sub-wrapper ul {}
#prmdNav li.custom-block div.sub-wrapper>ul>li, #prmdNav li.custom-block div.sub-wrapper ul li { width:auto; float:none; background:transparent url("../images/arrow_item.gif") no-repeat 10px 8px !important;; line-height: 22px; padding: 0 10px 0 20px;}
#nav { width:780px; margin:31px 0 34px 46px; padding:0; position:relative; border:none; float:left; }
/*********<导航*/
.nav容器{宽度:100%;边距:0自动;位置:相对;z索引:10010;}
#导航\选择{显示:无;最小宽度:100%}
nav.nav top title、.nav container.nav top title{字体系列:'Myriad Pro',无衬线;字体大小:16px;文本对齐:居中;边距:0;显示:无!重要;}
nav.prmd{宽度:100%;边距:0自动;位置:相对;z索引:10010;}
#prmdNav{宽度:780px;边距:31px 0 34px 46px;填充:0;位置:相对;边框:无;浮动:左;-webkit转换:全部0.5s轻松;}
/*各级*/
#prmdNav li{文本对齐:左;位置:静态;}
#prmdNav li.over{z-索引:998;}
#prmdNav li.parent{}
#prmdNav LIA{显示:块;文本装饰:无;字体重量:300;}
#prmdNav li a:悬停{文本装饰:无;}
#prmdNav LIA span{显示:块;空白:nowrap;光标:指针;}
#prmdNav li ul a span{空白:正常;}
/*第一级*/
#prmdNav>li{浮点:左;位置:相对;边距:0 3px 3px;背景色:白色;}
#prmdNav>li>a{-webkit转换:颜色0.2s易入易出;位置:相对;浮点:左;填充:0;颜色:#555;字体大小:14px;字体系列:“Myriad Pro”,无衬线;字体重量:700;行高:36px;字母间距:-0.1em;文本转换:大写;}
#prmdNav>li>a>span{padding:0px 10px;边框顶部:3px实心透明;边框左侧:3px实心透明;边框