slicknavを実装して左側にロゴを入れたい！

今回はslicknavの基本的な使い方から、ロゴを入れたりする応用までご紹介します。

slicknavの基本的な使い方は、slicknavの公式サイトはもとい日本語でご紹介しているサイトさんがいくつもあるのですが、
応用に関しては、あまり見かけなかったのでそういった経緯もあって書くことにしました。

常日頃からスマホのメニューJSで高クオリティなもので簡単に実装できるものないかなぁー！
と楽をしていいものを得たいという野心（？）を燃やしているのですが、その中のひとつといってもいいであろう”slicknav”を今回実装・カスタマイズしています。では、早速！

以下がデフォルトの機能をそのまま実装した場合です。
公式サイトにももちろん方法が書いてありますが英語なので参考にしてもらえればと思います。

記述はすごく簡単です。
まず、cssとJSをhead内に以下を読み込ませます。
CDNだとあとあと触れないので、もし右側にロゴを入れるのであれば公式サイトからダウンロードして入れてくださいね。

 

 

htmlはよくある単純なものです。子要素のメニューもつくれるので、子要素がある場合は、li要素の中にul li をさらに作ってください。
以下のソース見てもらえばわかると思います。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="spmenu">
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a>
<!-- 子要素メニュー -->
　<ul>
　<li><a href="#">サブメニュー01</a></li>
　<li><a href="#">サブメニュー02</a></li>
　<li><a href="#">サブメニュー03</a></li>
　</ul>
<!-- 子要素メニュー -->
</li>
<li><a href="#">メニュー04</a></li>
　</li>
</ul>

 

1
2
3
$(function(){
$('#spmenu').slicknav();
});

 

 

左側にロゴを入れる

そしてここからが、
ロゴを入れたい！となったとき！ソースは以下のような感じ。

 

 

もともと設定してあるbefore要素のcontentにテキストやら画像やらを設定して、高さを幅を追加して記述してあげれば
メニューの左側にロゴを入れることができます。

 

1
2
3
4
5
6
7
8
9
10
11
.slicknav_menu:before {
    width: 180px; //ロゴの幅
    height: 50px;　//ロゴの高さ
    float: left;　//左に寄せる
    margin-left: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
  content:"LOGO" !important;　//ロゴ
  color: #fff;
  font-size: 30px;
  }

 
テキストではなく画像の場合が多いと思うので、画像の場合は上のcssのcontent部分を空にして
背景画像でロゴが像を設定してください。

 

1
2
3
4
5
6
7
8
9
10
.slicknav_menu:before {
    width: 180px; //ロゴの幅
    height: 50px;　//ロゴの高さ
    float: left;　//左に寄せる
    background-image: url(画像のURL);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 100%;
    content:"";　//ここを空にする
}

 

どうでしょうか？左側に簡単にロゴを入れることができましたよね！
簡単なのでみなさんもぜひ実装してみてください。

次回はメニューが固定したいときのやり方をご紹介します！

=========================================================================================================
【ここから追記】

追加したロゴにリンクを設定したい場合は以下のようにJSで対応する必要があります。

1
2
3
$(function(){
$('.slicknav_menu').prepend('<h1><a href="https://creatornote.nakweb.com/slicknav_logo/">LOGO</a></h1>');
});

この場合、上記で説明したbefore要素は使用せず、prepend以降に追加したいソースをそのまま記載してください。
あとはCSSで調整します。

Share: