2

CSSを使用してワードプレスのテーマに次のようなドロップダウンメニューを設計しようとしています。

ここに画像の説明を入力

ドロップダウンを作成することはできましたが、CSS を使用して曲線を作成し、上の画像のように背景色を透明にする方法がわかりません。

透明に見えるようにしようとopacity:0.4; filter:alpha(opacity=40);しましたが、上のドロップダウン メニューの近くには見えません。

ドロップダウンを画像のように表示し、レスポンシブにする方法を教えてください。

ありがとう

これが私のコードです：

ここで私のコードをライブで確認することもできますhttp://jsfiddle.net/MdpPd/

HTML

<nav>
    <ul id="menu">
            <li><a href="">Homepage</a></li>
            <li><a href="">Google</a>
                <ul class="sub-menu">
                    <li><a href="">About Us</a></li>
                    <li><a href="">Programs</a></li>
                </ul>
            </li>
        </ul>  

</nav>

CSS

#menu {
display: block;
float: left;
margin: 0 auto 0;
width: 100%;    
}

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: #108BB6;
}

#menu li {
float: left;
position: relative;

list-style-type: none;
}

#menu a {
display: block;
line-height: 2.4em;
padding: 0 13px;
text-decoration: none;
}

#menu ul li {
display:block;
clear: both;
width: 265px;
}

#menu ul li:hover {
display: inline-block;
}

#menu li:not(:hover) ul {
display: none;
}

#menu ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}

#menu ul ul ul {
left: 100%;
top: 0;
}

#menu ul ul a {
background: #dedede;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}

#menu a:link {color:black;}
#menu a:visited {color:black;}
#menu a:focus {color:black; background: #ebdb00;}
#menu a:hover {color:white; background: #0C6481;}
#menu a:active {color:black; background: #ebdb00;}
4

4 に答える 4

3

:beforeと を使用してサブメニューに効果を作成しました:after。

デモをご覧ください。

これは最もクリーンなソリューションではありませんが、機能します。あなたの側で調整する必要がありますが、これが途中で役立つことを願っています.

于 2013-08-22T12:21:31.660 に答える
1

Border に曲線を与えるには、

css の「border-radius」プロパティ。お気に入り

border-radius: 5px; you can also use the border-(left,right,top,bottom) variations.

アイテムに不透明度を与えるため

「background-color: rgba(Redvalue, greenvalue, bluevalue, opacity value)」として色を指定してみてください。

お気に入り

background-color:rgba(0, 255, 0, 0.8)
于 2013-08-22T12:03:13.877 に答える
0

スキュー「曲線」については、http://www.w3schools.com/css3/css3_2dtransforms.aspスキュー関数を参照してください。

透明度の場合: この例は透明度が低く (0.9 に近い)、明るい青になっています。アーティスト/デザイナーはおそらくこれを知っているので、聞いてみてください。

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: 10aBd6;
opacity: 0.9;
transform: skew(30deg,0deg);
-webkit-transform: skew(30deg,0deg);
-ms-transform: skew(30deg,0deg);
}

うまくいくはずです。内部のテキストを「歪ませる」必要があります

#menu ul li {
display: block;
clear: both;
width: 265px;
    transform: skew(-30deg,0deg);
    -webkit-transform: skew(-30deg,0deg);
    -ms-transform: skew(-30deg,0deg);
}
于 2013-08-22T11:55:38.027 に答える
0

class=submenu の場合、以下のコードを使用してスキューを解消します

.submenu
{
   transform: skew(30deg,20deg);
   -ms-transform: skew(30deg,20deg); /* IE 9 */
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

サブメニューは、すでに入力したように不透明度設定も使用します。色については、希望する背景色を使用するだけです

.submenu{
 opacity:0.4; filter:alpha(opacity=40);
 background:blue;

}

レスポンシブ レイアウトを実現するには、twitter ブートストラップ、プロジェクト zurb などの一般的なフレームワークを使用するだけです

于 2013-08-22T12:09:32.400 に答える