[教えてください]ドロワーメニューの書き方[javascript,html,css]

###前提・実現したいこと
前提
PCで見る時にはウィンドウ上部に横並びになっているmenuリストをレスポンシブ対応させ、その時にドロワーメニューになるようにしたいのですが、どのようにすれば良いのでしょう。
いろいろなサイトで調べてみてはいるのですが、理想とするものに近ずけないので困っています。

実現したいこと
PCの時からある検索とカートを残してその横にハンバーガーメニューを表示させたいのですが、PCの時は綺麗に横並びになるように<ul>で囲んでいるのでそれを展開させてとなると表示したい検索やカートまでハンバーガーメニューの中にかくれてしまうのでそうならないようにする方法が知りたいです。

###該当のソースコード

html
1
2        <div id="headermenu">
3          <img class="logo" src="logo.png">
4          <ul>
5            <li>HOME<br>ホーム</li>
6            <li>NEW&nbsp;ITEM<br>新商品</li>
7            <li>CATEGORY<br>カテゴリー</li>
8            <li>TOPICS<br>トピックス</li>
9            <li>GUID<br>ガイド</li>
10            <li><input type="search" name="search"value="検索"></li>
11            <li><a href="">カート</a></li>
12          </ul>
13        </div> <!--headermanu -->
14        <div id="sumamenu">
15          <h1><img src="smlogo.jpg" alt="" /></h1>
16          <div id="smn">
17            <ul class="smenu">
18              <li><input type="search" name="search"value="検索"></li>
19              <li><a href="">カート</a></li>
20              <li><nav id="smb">
21                  <div id="navToggle">
22                    <span></span>
23                    <span></span>
24                    <span></span>
25                  </a></nav><!-- #navToggle -->
26                </li>
27            </ul> <!-- #smenu -->
28          </div><!-- #smn -->
29            <ul class="suma">
30              <li>HOME</li>
31              <li>NEW&nbsp;ITEM</li>
32              <li>CATEGORY</li>
33              <li>TOPICS</li>
34              <li>GUID</li>
35            </ul>
36          </nav> <!-- #smb -->
37        </div> <!--sumamenu -->
38

###該当のソースコード

css
1
2#headermenu{
3  /*height: 65px;*/
4  text-align: center;
5  /*  overflow:hidden; */
6}
7#headermenu > img{
8  float: left;
9  width: auto;
10  white-space:nowrap;
11}
12#headermenu > ul > li{
13  display: inline-block;
14  display: inline\9;/* IE10以下 */
15  *display: inline;/* IE7以下 */
16  _display: inline;/* IE6 */
17  margin: 10px 5px;
18}
19#headermenu>ul>li> input{
20  width: 80%;
21  }
22#headermenu>ul>li>a{
23  padding: 15px;
24  background-color: #fff;
25}
26#sumamenu{
27  display: none;
28}
29#navToggle {
30    display:none; /*通常時は非表示にしておきます*/
31    position:absolute; /*bodyに対しての絶対位置指定です*/
32    right:13px;
33    top:13px;
34    width:30px;
35    height:25px;
36    cursor:pointer}
37#navToggle div {position:relative} /*spanの絶対位置指定の親にします*/
38#navToggle span {
39    display:block;
40    position:absolute; /*#navToggle div に対して*/
41    width:100%;
42    border-bottom:solid 3px #999;
43    -webkit-transition: .35s ease-in-out;
44    -moz-transition: .35s ease-in-out;
45    transition: .35s ease-in-out}
46#navToggle span:nth-child(1) {top:0}
47#navToggle span:nth-child(2) {top:11px}
48#navToggle span:nth-child(3) {top:22px}
49
50@media all and (max-width: 768px) {
51  #headermenu{
52    display: none;
53  }
54
55  #sumamenu{
56    display:block;
57    width:100%;
58    overflow: hidden;
59  }
60  #smn{
61    float: right;
62  }
63  #sumamenu>h1{
64    float: left;
65    width: 45%;
66  }
67  #sumamenu>h1>img{
68    width: 100%;
69  }
70  #sumamenu >#smn>.smenu li{
71    float: left;
72  }
73  #sumamenu > ul >li>a{
74    padding: 3px;
75    background-color: #fff;
76  }
77  #smb >a{
78    padding: 15px;
79    background-color: #fff;
80    margin-top: 10px;
81  }
82  .suma{
83    display: none;
84  }
85
86#navToggle {display:block}
87
88

chiro.0519

2016/08/19 03:23 編集

ごめんなさい。実現したい事がいまいちわからないです。言葉では難しいなら、せめて画像でイメージを貼っていただけないでしょうか？ソースはこれ以外にjsは書いていないのですか？展開→これはどの角度からどの角度に向かってですか？表示したい検索やカートまでハンバーガーメニューの中にかくれてしまう →このソースだけでは動的部分が書かれて無い為、隠れるとはどんな状況かわかりません。それらを含めた修正をお願いします。