スマホで表示したときにヘッダにドロップダウンメニューを付ける

度々お世話になっております。

現在、過去に制作したHTMLページをスマホ対応にするための作業をしています。
スマホ対応表示は完成したのですが、
表題にございます、ドロップダウンメニューの付け方だけ苦戦しております。

今回、スマホで表示した際にドロップダウンメニューは「三」のような画像を使って表示をし、
そこが押されると、全体が下にずれてメニューが表示されるようにしたいと考えております。

そこで、jQueryのプラグイン「SlickNav」を利用しようかと思います。
最初はコピペですが、一通りコードを打ち込みました。
その結果めでたくページの一番最初に表示させることはできました。

そこから自分の知識を絞りだし、ヘッダに当たる部分にメニューを表示させようとしましたが、知識不足ということがありうまいようにできませんでした。

ヘッダにはロゴと、ドロップダウンメニューを表示させたく、
ロゴをfloat:left、ドロップダウンメニューをfloat:rightにて分けています。

まず、
・SlickNavプラグインだとメニューの表示が画像ではなく文字になっているためそこを独自の画像に変更をしたい
ということと
・float:rightの処理をしているためメニューをクリックするとfloat:rightの領域の大きさしか表示がされない→横いっぱいに表示をさせたい

という2点が改善できずにいます。
ソースも何もなく、文章もわかりにくいものかと思います。

プラグインではなく、CSSなどで改善できればということも考えています。
ご教授頂ければと思います。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

こんなかんじでどうでしょう？

lang
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
5  <meta charset="utf-8">
6  <title></title>
7  <link rel="stylesheet" href="http://slicknav.com/mobile-menu/slicknav.css" />
8  <style>
9    /* .headerを絶対配置の基準にする */
10    .header{
11      position:relative;
12    }
13    /* .logoを絶対配置する */
14    .logo{
15      position:absolute;
16      left:15px;
17      top:15px;
18      color:#fff;
19    }
20    /* 通常のアイコンを消す */
21    .slicknav_menu .slicknav_icon{
22      display:none;
23    }
24    /* 背景画像を設定 */
25    .slicknav_btn{
26      width:30px;
27      height:30px;
28      padding:0;
29      border-radius:0;
30      background:url(http://placehold.jp/20/000/fff/30x30.png?text=≡) no-repeat center;
31    }
32  </style>
33</head>
34<body>
35  <div class="header">
36    <div class="logo">Logo</div>
37    <div id="sp_menu"></div>
38  </div>
39  <ul id="menu">
40      <li><a href="#"><img src="http://placehold.jp/24/cccccc/ffffff/250x30.png?text=image_text1"></a></li>
41      <li><a href="#"><img src="http://placehold.jp/24/cccccc/ffffff/250x30.png?text=image_text2"></a></li>
42      <li><a href="#"><img src="http://placehold.jp/24/cccccc/ffffff/250x30.png?text=image_text3"></a></li>
43      <li><a href="#"><img src="http://placehold.jp/24/cccccc/ffffff/250x30.png?text=image_text4"></a></li>
44  </ul>
45  <script src="http://slicknav.com/mobile-menu/jquery.slicknav.js"></script>
46  <script>
47    $('#menu').slicknav({
48	  prependTo:'#sp_menu', //スマホ用メニューを差し込む位置を変更
49      label:"" //MENUの文字を出なくするため空にする
50    });
51  </script>
52</body>
53</html>