HTML,CSS、JQUERYについて

Question

ハンバーガーメニューについてお聞きし阿智です。
助けてください。

｛HTML｝

<div id="all_nemu1">

      <ul>
        <li><a href="company.html">会社概要</a></li>
        <li><a href="service.html">事業紹介</a></li>
        <li><a href="recruit.html">採用条件</a></li>
      </ul>

    <img src="img/base/hambargre.png" alt="メニューバー">

　　　　　　　　//ハンバーガーメニューの画像

  </div>

{CSS}

#all_nemu1 {
float: right;
width: 300px;
height: 60px;
margin-right: 60px;
}
#all_nemu1 img {
width: 50px;
height: 50px;
margin: 0 auto;
float: right;
right: 304px;
display:none;
}
#all_nemu1 ul {
width: 300px;
height: 30px;
padding-top: 3px;
position: absolute;
bottom: 0;
}
#all_nemu1 ul li {
float: left;
width: 100px;
text-align: center;
}

#all_nemu1 ul li a {
color: #fff;
}

@media screen and (max-width: 800px) {
#all_nemu1 ul li {
display:none;
}
#all_nemu1 img {
display:block;
}

この後にハンバーガーメニューをクリックすると、メニューが出て来るようにしたいです。上記を基にjqueryを作ったのですが全く動きませんでした。
「ハンバーガーメニュー　サンプル」で調べると自分で作ったHTML,CSSとは全く違うもので、またそれを基にクリックイベントを作っていました。この状態でクリックイベントは作れるのでしょうか？それかHTMLやCSSを変えないとクリックイベントは作れませんか？
IT初心者で言葉足らずで申し訳ありません。
ただ本当に答えに詰まっていて助けてほしいです。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[m.ts10806]

タイトルにタグにある内容は基本的に不要です。起きている問題やこの質問により実現したい機能解決したい問題にのみフォーカスしてください

Answer 1

(ちゃんと追記依頼に他の方が記載してくださった通り修正してから読んでくださいね！)

クリックイベントを付与できるか？

実装とサンプルが同じであることがそもそも稀なので、気にしなくて良いです。
また、クリックイベントですが、要素(divやul,liなど)が存在すれば付与することは可能です。

どのようにすればよいか？

記載してあるソースコードを読みましたが、HTMLの構造は変えずによいと思います。

$('#all_menu1 img').on('click', function(){
   ...//ここにクリック時の動作を記載
});

このように記載すれば
「idがall_menu1である要素内のimgタグに、クリックイベントを付与する」
となります。

jQueryについて

jQueryのノリ(HTMLの要素などに対して)としては、
$(セレクタ)
としてjQueryオブジェクトを取得し、それに対して関数を付ける、という形になります。
「セレクタ」
「jQuery セレクタ」
「jQuery DOM操作」
などで調べれば、もう少し理解が深まるかもしれません。