0

さて、私はこのレスポンシブ ナビゲーションを配置しました。それは素晴らしいです: http://media02.hongkiat.com/responsive-web-nav/demo/index.html

クラックベリーに至るまで、あらゆるものに作用します。このデモでは、ユーザーのビューポートが 480 程度よりも小さくなったときに開始するだけです (つまり、現時点では、ビューポートがそれよりも大きい場合、ナビゲーションは表示されません)。

副ナビゲーション（基本的にulの中にul）のあるサイトを開発しているので書いていますが、ユーザーが主ナビゲーションをクリックしないと副ナビゲーションは表示されません。使いやすさのために短いページを維持することにすべて関心があります。これが私が扱っているもののスケルトンです：

http://email.gerarddesign.com/nav/index.html

HTML:

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="#">services</a>
      <ul>
        <li><a href="#">branding</a></li>
        <li><a href="#">communications</a></li>
        <li><a href="#">interactive</a></li>
      </ul>
    </li>
    <li><a href="#">contact</a></li>
  </ul>
  <a href="#" id="pull">Menu</a> 
</nav>

CSS:

/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

/* Basic Styles */
body {
    background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #fff;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}

nav li {
display: inline;
float: left;
}
nav a {
color: #FBA03A;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
/*  text-shadow: 1px 1px 0px #999; */
text-transform: uppercase;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #FBA03A;
color:white;
}
nav a#pull {
display: none;
}

nav ul li ul li {background: url("../images/arroworange.png") 33px center #F2F2F2 no-            repeat;
}
nav ul li ul li a {padding-left:25px;}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav { 
    height: auto;
}
nav ul {
    width: 100%;
    display: block;
    height: auto;
}
nav li {
    width: 100%;
    float: left;
    position: relative;
}

nav ul li ul li {
    width: 100%;
    float: left;
    position: relative;
    }

nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
}
nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {
    border-bottom: 0;
}
nav ul, nav ul ul {
    display: none;
    height: auto;
}

nav a#pull {
    display: block;
    background-color: #FBA03A;
    width: 100%;
    position: relative;
    color:#fff;
}
nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}



nav li {
    display: block;
    float: none;
    width: 100%;
}
nav li a {
    border-bottom: 1px solid #D4862F;
}
}

この素晴らしいナビゲーションをさらに堅牢にするために拡張するのを手伝ってくれるかどうか教えてください。事前に感謝します!

4

2 に答える 2

0

私はこのナビゲーションの動作が本当に好きです。Twitterのブートストラップとは異なります。あなたはcssを読んで、彼らが何をしたかを見ることができます。

彼らは良いです、しかし私は彼らが「二重層」ナビゲーションを持っているとは思いません。あなたがしたいように。

私の提案は、別の折りたたみ式の中に折りたたみ式を構築することです。

編集：私はそれをすばやく見ようとしました、彼らがそれを呼び出す方法は折りたたみ可能です、ここにいくつかの例があります

進捗状況をお知らせください。

githubアカウントを開設して、peolpeにこのプロジェクトに貢献してもらうことができます:)。時間があれば助けたいです

于 2013-02-19T03:22:28.443 に答える
0

独自のフレームワークを作成していますか、それとも単にサイトを作成していますか? 後者の場合は、既存のフレームワークによってすでにうまく解決されている問題を解決するために時間を無駄にしないでください。メニューやサブメニューなどのレスポンシブ デザインの処理に優れた Bootstrap (Twitter から) を試してください。Bootstrap は非常に使いやすく、既存の Web サイトに簡単に追加できることがわかりました。

URL は次のとおりです: http://twitter.github.com/bootstrap/。

于 2013-02-19T03:08:08.547 に答える