グローバルナビは出来るのだが、スマホのトグルナビが開かなかった。
- 諦めては挑戦…の繰り返しを数え切れないほど
- 果てはCSSを印刷して、色んな blogのと比較
- いかんせん、CSSに無知なるワタシには理解不能である……クヤシィ〜
「はてなブログでグローバルナビがパソコンでは表示されるのにスマホでは表示されない」と検索したら
検索の語句で結果が随分と違うものだ
色んな言葉を入れて検索すればヒットするかも
つなろっくさんの blogに答えが……
幾つかの原因を書かれていたけど、私の場合は、ヘッダ＞タイトル下に入力した
「jQuery」 のURLの中の http をhttps に治した
治ったんだよ〜
スマホのトグルメニューが起動した〜
ここで歓喜の雄叫び〜
有難うございました
つなろっくさん
ユウブログさん ありがとうございました
グローバルナビ
１か月以上も出来ず、あきらめムードになっていたが、ようやく出来た
グローバルナビは起動するのに、スマホでは見た目はメニューあるのだが、起動しなかったのだ。
「jQuery」 のURLの中の http をhttps になおすとは……。
ワタシには理解不能だが、ネットで情報を得られる事が素晴らしい。
コピペに猛進する毎日だわ
グローバルナビのコードを下に表示。
PC用のブローバルナビは１列だけの単純構造ナビにして、それに他サイト様のナビを合体させてを、繰り返すという大迷走を１ヵ月も続けたものだから、利用させて貰ったサイト様が分からなくなった。
お蔭で出来ました、感謝しております。
① 青字のメニュー名とアドレスを各自変更してください
グローバルナビ スマホはトグルメニュー
デザイン→カスタマイズ→ヘッダ→タイトル下
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://www.mrk-blog.com/'>TOP</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/IT'>IT</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/CSS%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA'>CSSカスタマイズ</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/travel'>travel</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/garden'>garden</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/memo'>memo</a></li>
</div>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
あれれ？ スマホ表示ではピンク四角枠の中が全部見えてない。コードにdisplay: inline-blockを足して伸縮させたかったのだが、長すぎるとこうなるのだろうか？
念の為に再度記載↓
グローバルナビのリンク
デザイン→カスタマイズ→ヘッダ→タイトル下
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://www.mrk-blog.com/'>TOP
<li><a href='https://www.mrk-blog.com/archive/category/IT'>IT
<li><a href='https://www.mrk-blog.com/archive/category/CSS%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA'>CSSカスタマイズ</a></li>
<li><a href='https://www.mrk-blog.com/archive/category/travel'>travel
<li><a href='https://www.mrk-blog.com/archive/category/garden'>garden
<li><a href='https://www.mrk-blog.com/archive/category/memo'>memo
</div>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
②とても長いです
グローバルナビ設定
デザイン→カスタマイズ→デザインCSS
/*グローバルメニュー設置*/
#menu {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #f5f5f5;
/*グローバルメニュー背景色*/}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;
width: 16%;
}
/*←メニューを増やしたければ%を直す100÷メニュー数を入力*/
#menu li a {
display: block;
color: #708090;
/*グローバルメニュー文字色*/
font-size: 90%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;
}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #ffffff;
/*MENU背景色*/
text-align: right;
/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #343838;
/*MENUの文字色*/
display: inline-block;
padding: 0px;
margin: 0px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #d6ede3;/*リスト文字の背景色*/
margin: 0 auto;
text-align: center;
/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}
大 大 大念願のグローバルナビが完成
手間取っただけにとても嬉しい
CSSは少しの事で起動しなかったりと難しい
せっかく出来たのだから、当たらず障らず大事に置いておこう。