こっそりサイトリニューアル。
レスポンシブテンプレートに書き換えました。
まだまだ表示が変だなって部分もありますのでご迷惑おかけします。
レスポンシブテンプレートってのはパソコンのホームページをそのままCSSで表示をコントロールして表示するって感じです。
別で専用サイトを作らないので管理は楽になります
i Phoneの場合だいたい周りの人で確認出来たりしますがAndroidの場合機種が多すぎて確認は無理ですね
現在スマートフォンサイト特有の横スライダーを実装中です。
スマホでの一番上のメニューが横スライドで出てきます。
各商品ページの下の方、一緒にチェックして欲しいアクセサリーの場所も横スライドで商品が3つ表示。
デザイン的にもこれから少し変わってきますが機能紹介でした
さて、実際の実装のコード紹介も。
htnlはこんな感じです。
<div class="topmenu-slider-wrapper">
<div class="topmenu-slider">
<ul>
<li><a href="">メニュー</a></li>
<li><a href="">メニュー</a></li><li><a href="">メニュー</a></li>
</ul>
</div>
</div>
CSSはこんな感じ。
(リストのスタイルはPC表示の物が読み込まれています)
@media (max-width: 480px){
.topmenu-slider-wrapper {
width: auto;
padding: 5px;
overflow-x: auto;
overflow-y: hidden;
}.topmenu-slider {
width: 950px;
-webkit-overflow-scrolling: touch;
}.topmenu-slider > * {
-webkit-transform: translateZ(0px);
}.topmenu-slider-wrapper::-webkit-scrollbar {
display: none;
height: 0 !important;
}
}
「@media (max-width: 480px)」でスマホサイズの画面サイズのみに適応されます。
こちら専門ではないので自己責任でお願いします!
テンプレートのコピーは取ろうね!
凄くシンプルなんでお試しあれ
参考サイトさんに感謝
- 2017.07.20 Thursday
- WEB関係
- 11:46
- comments(0)
- -
- by NORI