CSS3 を使用してサイトで :hover をアニメーション化しています - Firefox で実行すると、ナビゲーション アニメーションは完璧で、テキストは左からスライドします - ただし、Chrome と Safari では、Firefox のようにアニメーションを実行しないようです. クロムでは、下から来るように見えますか?
ここでライブの例を見ることができます (左のナビゲーションです): http://www.wearewebstars.dk/frontend/Navigation/boerneunivers.html
ナビゲーション用の HTML は次のとおりです。
<div class="left-navigation fixed">
<nav class="left">
<ul id="nav">
<li class="li-blue">
<div class="border-left"></div>
<a href="#page1" class="left-link nav-blue" data-page="page1">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-blue.png" alt="" title="" /></div>
<span class="nav-text">Myanmar</span>
</a>
</li>
<li class="li-darkred">
<div class="border-left"></div>
<a href="#page2" class="left-link nav-darkred" data-page="page2">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-darkred.png" alt="" title="" /></div>
<span class="nav-text">Storbyen</span>
</a>
</li>
<li class="li-orange">
<div class="border-left"></div>
<a href="#page3" class="left-link nav-orange" data-page="page3">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-orange.png" alt="" title="" /></div>
<span class="nav-text">Skolen</span>
</a>
</li>
<li class="li-purple">
<div class="border-left"></div>
<a href="#page4" class="left-link nav-purple" data-page="page4">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-purple.png" alt="" title="" /></div>
<span class="nav-text">Klostre & Munke</span>
</a>
</li>
<li class="li-green">
<div class="border-left"></div>
<a href="#page5" class="left-link nav-green" data-page="page5">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-green.png" alt="" title="" /></div>
<span class="nav-text">Landsbyen</span>
</a>
</li>
<li class="li-brown">
<div class="border-left"></div>
<a href="#page6" class="left-link nav-brown" data-page="page6">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-brown.png" alt="" title="" /></div>
<span class="nav-text">Floden</span>
</a>
</li>
<li class="li-red">
<div class="border-left"></div>
<a href="#page7" class="left-link nav-red" data-page="page7">
<div class="nav-icon"><img src="assets/css/boerne-img/menu/icon-red.png" alt="" title="" /></div>
<span class="nav-text">Din hjælp</span>
</a>
</li>
</ul>
</nav>
</div>
ナビゲーション用の CSS は次のとおりです。
.left-navigation { width: auto; }
.left-navigation h2 { background: transparent url(img/left-menu-h2.png) repeat-x; box-shadow: 0 3px 5px 0px #444; font-size:11px !important; padding: 7px 10px; display:inline-block; text-transform:uppercase; color:#FFF; margin-bottom:4px; }
.left-navigation.fixed { z-index:1000; position:fixed; left:0; top:20%;}
.left-navigation ul { margin-bottom:40px !important;}
.left-navigation ul,
.left-navigation ul li{ padding:0; margin:0; list-style:none; font-weight:bold;}
.left-navigation ul li {
background: transparent url(boerne-img/menu/bg-li.png) top right no-repeat;
margin-bottom:-10px;
display:table;
position:relative;
width:auto;
overflow:hidden;
height:55px;
padding: 0 20px 0 10px;
-webkit-transition: width .3s ease-in-out;
-moz-transition: width .3s ease-in-out;
-o-transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
.left-navigation ul li:not(.current) {
width:35px;
display:block;
min-width:35px !important;
}
.left-navigation ul li:hover {
min-width:35px !important;
width:auto;
-webkit-transition: width .3s ease-in-out;
-moz-transition: width .3s ease-in-out;
-o-transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
.left-navigation ul li a,
.left-navigation ul li a:hover{ text-decoration:none;}
.left-navigation ul li span.nav-text { /*display:inline-block;*/ position:relative; left:-250px; z-index:1; }
.left-navigation ul li:hover span.nav-text { left:0;}
.left-navigation ul li.current span.nav-text { left:0;}
.left-navigation ul li:hover span.nav-text,
.left-navigation ul li.current span.nav-text{ padding-left:10px; color:#000; }
.left-navigation ul li .nav-icon { padding: 9px 0 0 0; display:inline-block; position:relative; z-index:2;}
.left-navigation ul li a.nav-blue .nav-icon { padding: 8px 0 0 0; }
/* Safari Hack */
html[xmlns*=""]:root .left-navigation ul li:hover { width:100% !important;}
*|html[xmlns*=""] .left-navigation ul li:hover { width:100% !important;}
/* Border styles for left-nav */
.left-navigation ul li.li-blue .border-left {
border-left: 5px solid #004C73;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-darkred .border-left {
border-left: 5px solid #750809;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-orange .border-left {
border-left: 5px solid #dc5928;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-purple .border-left {
border-left: 5px solid #d89fbc;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-green .border-left {
border-left: 5px solid #a5cd41;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-brown .border-left {
border-left: 5px solid #ae8f48;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}
.left-navigation ul li.li-red .border-left {
border-left: 5px solid #f03307;
display: inline-block;
height: 45px;
margin-left: -10px;
margin-top: 5px;
float:left;
}