1

最初に、Flash のチュートリアルを行った後、この Flash ベースのナビゲーション メニューを自分の Web サイト用にデザインしました。サンプルページを見せた一部の訪問者が、システムにフラッシュプラグインがインストールされていないため、ブラウザー (Internet Explorer) がメニューを開かなかったと言うまで、すべてはうまくいきました。これらのことを考えると、私のウェブサイトの訪問者の多くがシステムにフラッシュをインストールしていない場合、メニューを表示できない可能性があります。また、ナビゲーション メニューにアクセスできない場合、Web サイト全体が機能しなくなります。

別の非常に優れた CSS ベースの VERTICAL メニューに出会いました。これは、フラッシュ メニュー (BLACK HOVER EFFECT) とほぼ同じように機能します。これはコードです：

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 178px;
background-color: #FFFFFF;
}

#coolmenu a{
font: bold 13px Tahoma;
padding: 16px;
padding-center: 0px;
display: block;
width: 100%;
color: 3a403c;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: red;
color: white;
}

</style>

<div id="coolmenu">
<a href="">ABOUT US<br><small> a brief note on our genesis </small></br></a>
<a href="">CONTENT SECTIONS<br><small> what we publish </small></br></a>
<a href="">EDITORIAL BOARD<br><small> fellow comrades </small></br></a>
<a href="">DOWNLOAD<br><small> our magazine archives </small></br></a>
<a href="">CONTACT US <br><small> mailing address </small></br></a>
</div>

しかし、私のウェブサイトでその CSS メニューを使用したい場合は、横向きにデザインする必要があります。

私は自分自身を変えようとしましたが、惨めに失敗しました :( メニューの幅は 665 ピクセル、高さ 48 ピクセルである必要があります...各ブロック、つまり、ABOUT US、CONTENT、DOWNLOAD などは 133 ピクセルのサイズの区画内にある必要があり、色の細いバーがあります #各ブロックの右端にある 616060. 私はそれを最初のブロック、つまり ABOUT US に対してのみ持つことができましたが、他のすべてのメニュー区分は引き続き垂直に配置されています.

また、フラッシュ メニューでわかるように、01、02、03 から 05 までのフォント サイズと色 (Arial フォント サイズ 16bold; 色 #858383) と、テキスト「ABOUT US」のフォント サイズと色が異なります。 CONTENT「DOWNLOAD」「EDITORIAL BOARD」「CONTACT US」（Arialフォントサイズ10、色白）

しかし、ここの CSS では、数字とテキストの異なるフォント サイズと色を取得できません。

これは私が最初のブロックだけで試したことです。

<style type="text/css">

#coolmenu{
width: 665px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: center;

}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 14px Arial;
padding-center: 0px;
display: block;
width: 133px;
color: #858383;
text-decoration: none;
border-right: 1px solid #616060;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

<div id="coolmenu">
<a href=""><font face="Arial" size="16" color=#858383><b>01</b></font><br><font face="Arial" size="10" color="white">ABOUT US</font></br></a>
<a href="">02<br><small> CONTENT SECTIONS </small></br></a>
<a href="">03<br><small> EDITORIAL BOARD </small></br></a>
<a href="">04<br><small> DOWNLOAD PDF</small></br></a>
<a href="">05<br><small> CONTACT US  </small></br></a>
</div>

私のフラッシュメニューとこのCSSメニューと同様のフォントスタイルを水平にする方法を教えてください。前もって感謝します。

4

3 に答える 3

1

これはあなたが望む効果ですか：http：//jsfiddle.net/UmpdH/10/ [最終更新]

基本的に、htmlを修正し、順序付けされていないリスト<ul>を使用して、各アンカーを<li>、floattoleftでラップし、必要に応じて要素のスタイルを設定します。

HTML：

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span><div>01</div>ABOUT US</span></a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span><div>02</div>CONTENT SECTIONS</span></a></li>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span><div>03</div>EDITORIAL BOARD</span></a></li>
    <li><a href="http://www.aamaodisha.org/download.php"><span><div>04</div>DOWNLOAD PDF</span></a></li>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span><div>05</div>CONTACT US</span></a></li>
</ul>​

CSS：

<style type="text/css">

#coolmenu{
width: 670px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: left;
list-style: none;
}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 10px Arial;
padding-center: 0px;
display: block;
/*width: 133px;*/
text-decoration: none;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu li:hover{
background-color: black;
}

#coolmenu li:hover a {color: white;}

#coolmenu li { width: 118px; height: 48px; padding-left: 15px; float: left; border-right: 1px solid #616060; }
#coolmenu li a span { min-width: 50px; display: inline-block; }

#coolmenu li a div { color: #858383; font: bold 16px Arial; text-align: left; }​

</style>

編集：上記のメニューは、ここで見られるようにフラッシュメニューと同じ効果があります：http ：//www.aamaodisha.org/contact.html

編集：最終更新、左揃えのテキスト、左詰め：15px

于 2012-06-29T06:11:52.583 に答える
1

完全な作業コードは次のとおりです: http://jsfiddle.net/surendraVsingh/UmpdH/17/

HTML

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span>01</span>ABOUT US</a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span>02</span>CONTENT SECTIONS</a>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span>03</span>EDITORIAL BOARD</a>
    <li><a href="http://www.aamaodisha.org/download.php"><span>04</span>DOWNLOAD PDF</a>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span>05</span>CONTACT US</a>
</ul>

CSS:

#coolmenu{
    width: 665px;
    height: 48px;
    margin: 20px auto;
    padding: 0;
    background-color: #CC3300;
    text-align: left;
}

#coolmenu li{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
     width: 133px;
     border-right: 1px solid #616060;
     display:block;
     float:left;
}
#coolmenu li:last-child{border:none;}
#coolmenu span{
    display:block; 
    text-align:left; 
    color: #858383; 
    font-size:15px;
}
#coolmenu a{
    padding:8px 0 8px 5px;
    color: #fff;
    font: bold 11px Arial;
    text-decoration: none;
    display:block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
#coolmenu a:hover{
background-color: #000;
}​
于 2012-06-29T08:21:33.247 に答える
0

リストを使用する必要があります。

<ul>
    <li>
        <a>ETC</a>
        <a>ETC</a>
    </li>
</ul>

css 部分に float: left を使用します。

于 2012-06-29T06:22:56.810 に答える