スマホの縦画面にフィットするナビボタン

シリウスカスタマイズＴＯＰ＞横にスライドするナビゲーション｜スマートフォン対応＞スマホの縦画面にフィットするナビボタン

求める情報の単語入力でサイト内から関連ページの確認ができます

googleカスタム検索

スマホの縦サイズで出現するナビボタン

大変申し訳ありません

当解説は、エントリーページでの特有表示を主にしていましたが
読者様の要望でサイト全体で可変する構築に書き換え中ですので
終了するまで今しばらくご利用をお待ちください

シリウスサイトにＧナビゲーションを設定している場合でレスポンシブ化を
組み込んで以降、横幅が縮小してテキストも文字が一部隠れてしまい
見ずらくなるレイアウトになります

シリウスの追加されたレスポンシブテンプレートでは、その対策として
スマホ画面では、Ｇナビゲーションを表示せずナビボタンに切り替えしてますが
デフォルトよりカスタマイズした、レスポンシブ化サイトでも作動を
組み込むことは、さほどの面倒もなくできますので、まずはお試し？

一応ＤＥＭＯのため以下においてますが、カスタマイズ以降は、
パソコン画面サイズから～スマホの横画面までは現れず、縦画面のサイズで
Ｇナビゲーションを非表示として、サイト上部に出現する仕組みにしています

ＤＥＭＯは、パソコンサイズでは、現れません、ですので動きません...
パソコンが、画面を狭めるとＧナビが消え、サイト上部で出現しますので
お試しください

また、トップナビのレイアウト縮小もここでは確認できませんが
導入以降はレスポンシブ化します

一応ＤＥＭＯ　隠れるはずのぷるメニューは、ここでは指定なしなので
開いてます

当ページでは、スタイルの割り込みで　@media(max-width:500px){からの
作動と指定しているので、パソコン画面から見る範囲では開いた状態に
なっています

実際には、見えない...です

左にスペースが空いてしまいますが確認用として記事内にコード置いているが
原因ですので....

htmlテンプレート内に記載するとスペースは空ませんが、

スタイルシートでパソコン画面サイズでは非表示の指定も追加することに
なります

ページ内置く場合の取り付け記述は2か所で、このまま組み込んで作動を
確認できます

対応範囲は、デフォルト　ビジネステンプレートになります

ＨＴＭＬ内に記述の追加

ＨＴＭＬテンプレートでは、<body>直下に置きます

記事内なら巻末に

下方に置くこともできますが、上にスペースが空いてしまいます

<div id="normalnav5" class="drop">
<li><a href="#"><span style="color:#FF0A0A">●●●●</span></a>
<ul>
<li><a href="#">submenusubmenusubmenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</div>
ここまで
</div>
</body>
</html>

貼り付けよう記述
ｉｄは、スタイルシートに追加する気ＣＳＳも同じ

メニューテキストは5つ　追加する場合は、行を追加　

一番上のあかまるは、
ｐｃ操作で、くろまるを出して変換して、シリウス機能で色図けしたもの
タイトルでも　その他でも入れ替えてください

メニューカラーはスタイルシートで切り替えます

スマホの横サイズ　670pxからの作動にしていますが、位置の指定に
こだわりがある場合は数値を変えてください

@media(max-width:500px){

.drop{
display: block;
}

/*スマホではナビボタンをサイト上部で表示する*/
.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 10px;
padding: 0;
top: 0;
position: absolute;
top: 0;
}
.drop:before, .dropmenu:after{
content: "";
display: table;
}
.drop:after{

clear: both;
}
.drop li{
position: relative;
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.drop li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #999999;
color: #FFF;

font-size: 14px;
line-height: 1;
text-decoration: none;
}
.drop li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.drop li ul li{
width: 100%;
}

.drop li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #666666;
text-align: left;
}

.drop li:hover > a{
background: FF4EF6;
}

.drop li a:hover{
background: #555555;

}

/*作動スタイルの指定項目*/

#normalnav5 li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#normalnav5 li:hover ul li{
overflow: visible;
height: 38px;
}

/*スマホではＧナビを非表示*/

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;
top: 200px;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
　　　　display: none;
}

#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;
<% topMenuWidth %>
text-align: center;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;

padding-bottom:3px;
display: none;
}
}

ここで大変申し訳ございませんが、このメニューを使う際は
スマホサイズでグローバルナビを消す、非表示にする指定も
追加しなければまりません

さらに、スマホで現れるナビは、それ以上のサイズでは逆に
非表示にするという指定も追加で

解説が長くなり理解が難易になってしまいます

ですので、ただ今わかりやすく記事替えしますので少々時間を
ください

スポンサー広告

ページトップ
スマホの縦画面にフィットするナビボタン
 横にスライドするナビゲーション｜スマートフォン対応
 シリウスカスタマイズTOP

スマホの縦画面にフィットするナビボタン