タッチスクリーンに表示される「インタラクティブ」を構築しています。機能の 1 つは、固定フッター ナビゲーションです。メインのナビゲーション要素にフロートを使用しています。各要素内には、画像を左にフローティングすることで並べて表示されている画像とテキストがあります。
ほとんどの場合は機能していますが、いくつかの問題があります。
- ビューポートがタッチスクリーンの幅 (1366 ピクセル) より下にある場合、フローティング ナビゲーション要素が互いに積み重なります。これが標準的な動作であることはわかっていますが、ビューポートが小さい場合でもそれらを 1 行にまとめて固定したいと思います (スクロールバーは問題ありません)。
- ナビゲーション バーの要素は、その位置を維持する必要があります (要素ごとに、画像とテキストがあり、互いに重ならないように並べて配置する必要があります)。
- 要件では、アクティブな場合、各要素には周囲に境界線があり、太字で大文字にする必要があると述べられています。これにより、固定幅の要素が詰まります。太字と大文字によるサイズの増加に対応するのに十分なスペースが固定幅に含まれるようにまとめましたが、これについて心配する必要はありません。
空白を試してみました: nowrap; しかし、それは nav 要素のフォーマットを台無しにしました。
ナビゲーション用の HTML は次のとおりです (はい、微調整中にインライン スタイルを使用していますが、それがひどいことはわかっています)。残念ながら、要素を適切に整列させるには、すべて異なる固定幅が必要です。これに関するアイデアは素晴らしいでしょう。
<div style="background-color: white !important" class="navbar navbar-fixed-bottom">
<ul class="nav" style="background-color:white !important; max-width: 1366px; ">
<li class="" style="padding-top:0px; width:110px;">
<a class="bootstrap-override" style="background-color: white; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;" href="/projects/dev/mediacombo/public/title"><img src="img/logo-nav-bar.png"></a>
</li>
<li style="width:200px; padding-top:10px;" class="active" >
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/vignette">
<img class="bardnav-item-image nav-img" src="img/icon-1.png">
<p class="bardnav-item-text">Indigenous Traditions</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:176px;">
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-2.png">
<p class="bardnav-item-text">Industrial Embroidery</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:156px;" >
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-3.png">
<p class="bardnav-item-text">Modern American Silks</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:192px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/beller">
<img class="bardnav-item-image nav-img" src="img/icon-4.png">
<p class="bardnav-item-text">American Made Fashion</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:142px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/batiks">
<img class="bardnav-item-image nav-img" src="img/icon-5.png">
<p class="bardnav-item-text">Modern American Batiks</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:118px;">
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-6.png">
<p class="bardnav-item-text">Art in Dress</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:140px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/tea_gowns">
<img class="bardnav-item-image nav-img" src="img/icon-7.png">
<p class="bardnav-item-text">Tea Gowns</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:98px; padding-top:0px">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/about_main">
<img style="margin-top:10px;" src="img/link-red.png">
<h5 style="max-width:100px;">About the Exhibition</h5>
</a>
</li>
</ul>
</div>
CSS:
.bardnav-item-text{
margin-left: 5px !important;
margin-right: 5px !important;
font-weight: normal;
font-size: 13px;
}
.active{
color: #8B0E04 !important;
font-weight: bold !important;
border-bottom: 5px solid #ddd2cc;
border-right: 5px solid #ddd2cc;
border-left: 5px solid #ddd2cc;
padding: 10px 0 10px 0;
}
.active > a > p{
color: #8B0E04 !important;
font-weight: bold !important;
text-transform: uppercase !important;
}
.nav > li{
padding:10px 0 10px 0;
}
.about-active{
margin-right:10px;
margin-bottom:10px;
padding:0 0 0 0;
}
.bootstrap-override{
background-color: white !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.nav-img{
float:left;
}
このリンクでページをライブで見ることができます(ページをクリックし、タイトル ページの「先住民族の伝統」をクリックして、私が話している内容を確認してください)。