input4.html

<nav>
    <div>
          <div class="menu-btn">
                <ion-icon name="menu"></ion-icon>
          </div>
          <div class="menu">
                <div class="close-menu">
                      <ion-icon name="menu"></ion-icon>
                </div>
                <div class="nav">
                      <ul class="main-menu">
                            <li class="main-menu-item">
                                  <a href="#"><ion-icon name="business"></ion-icon> Home<ion-icon name="add"></ion-icon></a>
                                  <ul class="submenu">
                                        <li class="submenu-item">
                                              <a href="history.html">History</a>
                                        </li>
                                        <li class="submenu-item">
                                              <a href="employee.html">Employee</a>
                                        </li>
                                  </ul> 
                            </li>
                            <li class="main-menu-item">
                                  <a href="#"><ion-icon name="restaurant"></ion-icon> Menu<ion-icon name="add"></ion-icon></a>
                                  <ul class="submenu">
                                        <li class="submenu-item">
                                              <a href="steak.html">Steak</a>
                                        </li>
                                        <li class="submenu-item">
                                              <a href="pasta.html">Pasta</a>
                                        </li>
                                        <li class="submenu-item">
                                              <a href="pliaf.html">Pliaf</a>
                                        </li>
                                        <li class="submenu-item">
                                              <a href="desserts.html">Desserts & Drinks</a>
                                        </li>
                                  </ul> 
                            </li>
                            <li class="main-menu-item">
                                  <a href="#"><ion-icon name="person"></ion-icon> Reservation<ion-icon name="add"></ion-icon></a>
                                  <ul class="submenu">
                                        <li class="submenu-item">
                                              <a href="apply.html">Application</a>
                                        </li>
                                      </ul>
                                    </li>
                                       
                            <li class="main-menu-item">
                                  <a href="#"><ion-icon name="call"></ion-icon> Contact<ion-icon name="add"></ion-icon></a>
                                  <ul class="submenu">
                                        <li class="submenu-item">
                                              <a href="contact.html">Location &<br>Contact</a>
                                        </li>
                                      </ul>
                                    </li>
                             <li class="main-menu-item">
                                  <a href="index.html"><ion-icon name="arrow-round-back"></ion-icon> Back</a>
                              </li>

                      </ul>
                </div>
          </div>
    </div>
    </nav>
    <p><strong>We will introduce pasta best friend with steak at our restaurant.</strong></p><br>
    <p><img src="aglio.png" width="800" height="450"></p><p><strong>Spicy Seafood Aglio E Olio:</strong> It with the Extra virgin olive oil flavor, rich garlic flavor and plenty of fresh seafood.</p><p><img src="toowoomba.png" width="800" height="450"></p><p><strong>Toowoomba Pasta: </strong>Deep-sealed creamy pasta with high-quality Parmesan cheese, shrimp and mushrooms</p><p><img src="original.png" width="800" height="450"></p><p><strong>Toowoomba Steak Pasta: </strong>Pasta seasoned with soft steak and the best toowoomba sauce in the restaurant.</p><p><img src="spicy.png" width="800" height="450"></p><p><strong>Spicy Toowoomba Pasta: </strong>Spicy flavor and flavor of pasta's best toowoomba sauce</p><p><img src="tomato.png" width="800" height="450"></p><p><strong>Tomato Chiopino Pasta:</strong> Authentic style tomato pasta with seafood such as mussels and squid.</p>


    <script type="text/javascript">
        $('ul.main-menu li').click(function (e) {

            if ($().siblings('li').find('ul.submenu:visible').length) {
                $('ul.submenu').slideUp('normal');
            }
            $(this).find('ul.submenu').slideToggle('normal');
        });

        var t1 = new TimelineMax({ paused: true });     /*전환 시간 설정*/

        t1.to(".menu", 0.2, {
            opacity: 0.9
        });

        t1.staggerFrom(".main-menu li a:not(.submenu li a)", 1, {         /*메인메뉴 활성화*/
            opacity: 0,
            y: 10,
            ease: Power3.easeInOut
        }, 0.1);

        t1.from(".submenu", 0.1, {                                        /*서브메뉴 활성화*/
            autoAlpha: 0
        });

        t1.reverse();

        $(document).on("click", ".menu-btn", function () {                  /*클릭시 t1 함수 활성화*/
            t1.reversed(!t1.reversed());
        });

        $(".close-menu").click(function () {                /*클릭시 t1 함수 역으로 활성화*/
            t1.reversed(!t1.reversed());
        });
        $(document).ready(function () { 
          var top = $('#adside').offset().top - parseFloat($('#adside').css('marginTop').replace(/auto/, 0));
         $(window).scroll(function (event) {
          var y = $(this).scrollTop();
     
         if (y >= top) {
            $('#adside').addClass('fixed');
         } else {
            $('#adside').removeClass('fixed');
        }
    });
});


    </script>