1

CSS:hover 効果で左または右に開く HTML/CSS メニューがあります。ほとんどの最新のブラウザーではうまく機能しているようですが、Chrome では効果が左に行くとテキストが少しグリッチします。

フィドル

HTML:

<ul class="tabs">
<li class="rotateL work_link"><a href="#">WORK</a>
<ul class="submenu">
<li><a href="#house" class="work">housing</a></li>
<li><a href="#interior" class="work">interior</a></li>
<li><a href="#public-space" class="work">public space</a></li>
<li><a href="#public-buildings" class="work">public buildings</a></li>
<li><a href="#planing" class="work">planing</a></li>
<li><a href="#design" class="work">design</a></li>
<li><a href="#search" class="work" id="searchlink">search</a></li>
</ul>
</li>
<li class="rotateR practise_link"><a href="#">PRACTICE</a>
<ul class="submenu">
<li><a href="#mission" class="practise">mission</a></li>
<li><a href="#history" class="practise">history</a></li>
<li><a href="#services" class="practise">services</a></li>
<li><a href="#awards" class="practise">awards</a></li>
</ul>
</li>
</ul>

CSS:

ul.tabs, ul.tabs ul {
margin:0 auto;
padding:0;
list-style:none;
font-size: 7pt;
}
ul.tabs > li {
border: 1px solid #fff;
position:relative;
}
ul.tabs > li > a {
float:left;
width:18px;
}
ul.tabs li:hover > a {font-weight: bold; }
ul.tabs li ul {
position:absolute;
left:0;
opacity:0;
height:0;
width:0;
overflow:hidden;
background: #fff;
vertical-align: bottom;
/*display: table;*/
}
ul.tabs li li { line-height: 12pt; white-space: nowrap;}
ul.tabs ul a {
line-height: 12pt;
background:#fff;
margin-bottom:-1px;
text-decoration:none;
color:#000;
text-transform: uppercase;
display: block;
padding: 0px 2px;
}
ul.tabs:hover li ul {
    display: block;
    opacity: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

ul.tabs li.rotateL, ul.tabs li.rotateR { background: #fff; width: 18px;}
ul.tabs li.rotateL > a,ul.tabs li.rotateR > a { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    bottom: 10px;
    position: absolute;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}
ul.tabs li.rotateL > a:hover, ul.tabs li.rotateR > a:hover { font-weight: normal; }
ul.tabs li.rotateR ul {
left: -127px;
top: -1px;
text-align: right;
border-right: 1px solid #111;
}
ul.tabs li.rotateL ul {
left:19px;
top: -1px;
white-space:normal;
border-left: 1px solid #111;
}

li.work_link {
    left: 40px;
    height: 151px;
    display: block;
    color: #000;
    cursor: pointer;
}
ul.tabs li.work_link ul {
    height: 108px;
    width: 110px;
    vertical-align: bottom;
    padding-top: 45px;
}
ul.tabs:hover li.work_link ul:not(.active) {
    animation:workLink 2s 1;
    -webkit-animation:workLink 2s 1; /*Safari and Chrome*/
}
@keyframes workLink
{
from {width: 0px; }
to {width: 110px; }
}

@-webkit-keyframes workLink /*Safari and Chrome*/
{
from {width: 0px;  }
to {width: 110px; }
}

li.practise_link {
    left: 165px;
    height: 98px;
    display: block;
    cursor: pointer;
}
ul.tabs li.practise_link ul {
    height: 64px;
    padding-top: 36px;
    width: 58px;
    left: -58px

}
ul.tabs:hover li.practise_link ul:not(.active) {
    animation:practiseLink 2s 1;
    -webkit-animation:practiseLink 2s 1; /*Safari and Chrome*/
}
@keyframes practiseLink
{
from {width: 0px; left: -2px}
to {width: 58px; left: -58px}
}

@-webkit-keyframes practiseLink /*Safari and Chrome*/
{
from {width: 0px; left: -2px; }
to {width: 58px; left: -58px; }
}

コードがごちゃごちゃしすぎている場合は、私に知らせてください。別のより簡単な解決策に取り組む必要があると思います:/

前もって感謝します。

4

1 に答える 1

0

ここに本当の答えがあるので、正解としてマークできます。重複して申し訳ありません。

すぐに使える解決策はありませんが、右揃えのテキストが原因であると言えます。ブラウザがアニメーション中にテキストの位置を再計算すると、「揺れ」ます。この再計算を避けるために、(overflow:hidden と混合して) 要素の幅を設定するようにしてください。

于 2013-06-18T09:59:07.920 に答える