html ,css, js 질문이요 !

본문 바로가기

html ,css, js 질문이요 !

작성일 2023.08.11댓글 1건
    게시물 수정 , 삭제는 로그인 필요

제가 웹사이트를 만들고 있는데 틀은 다 만들었는데 메뉴바를 눌렀을 때 왼쪽에서 메뉴바가 나오게 구현하고 싶은데 아무리 해봐도 잘 안됩니다. 혹시 css, js를 이용해서 결과가 나오게 도와주실 수 있을까요? 결과는 두번째사진처럼 나오면 됩니다. 한번만 도와주세요 !
<code>
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
<title>악기마루</title>
<meta charset="utf-8">
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style> 
<%--상단 메뉴바--%>
ul{list-style:none; margin:0px; padding:1px; border:1px solid #000;}
.one{float:left; width: 120%; width: 100%; position: fixed;display: flex;justify-content: center;}/* 전체 메뉴를 float 시킴 */
.one > li{float:left;}   /*1단 메뉴를 일렬로 늘어놓기 */
.one ul{display:none;}  /*2단, 3단 메뉴를 숨기기 */
.one li:hover > ul {display:block;}  /*주 메뉴에 마우스 오버했을 때 부 메뉴 드러내가 */
.two{position:absolute;left:0px; top: 31px; }  /*2단 메뉴 절대 위치*/
.three{position:absolute;left:93px; top: 0px; }  /*3단 메뉴 절대 위치*/
ul li a{text-decoration:none; display:block; width:90px; height: 30px; line-height: 30px; text-align:center;} 
.one  li {width:200px;}  
.one li:hover{background-color:#EAEAEA;} 
#header {position:relative; margin-left:-10px; margin-top: -10px; zoom:1;} 
#header:before, #header:after{content:" "; display: block; clear: both;}
#header:after{clear: both;}
.navbar_top{text-align: center;}
.util_menu{text-align : right; float: right; margin-right: 2%; margin-top: -63px; border: none;}
.one li:hover {
    background-color: #EAEAEA;
    position: relative;
}
 
<%--왼쪽 사이드 바--%>
/* lnb */
#lnb {position: relative;width: 144px; top: -16px; left: 38px;}
#lnb h1 {height: 40px;text-align: center;color: #fff;font-size: 20px;line-height: 1.8;letter-spacing: -2px; background: #d71a21; border: none;}
#lnb > ul {margin-top: -13px; border: none;}
#lnb > ul > li { border-bottom: 1px solid #dcdcdc;}
#lnb > ul > li > a {display: block;padding: 14px 35px 14px 15px; color: inherit; font-size: 14px;background:#f5f2ec url(https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225) no-repeat 95% 15px;}
#lnb > ul > li a:hover {color: #d91c1b; background-color: #f5f2ec;}
#lnb > ul > li.on > a {color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 14px; border: none;  width: 91px;}
#lnb > ul > li ul {display: none; border: none; margin-top: -1px;}
#lnb > ul > li > ul > li > a {display: block;padding: 0 25px 14px 14px;color: #inherit; font-size: 12px;background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225') no-repeat 95% 1px;}
#lnb > ul > li > ul > li > a {color: #d91c1b; background-color: #f5f2ec; width: 102px;}
#lnb > ul > li > ul > li.on a {color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 3px;  border: none;}
#lnb > ul > li > ul li ul {display: none;padding-bottom: 8px;background-color: #f5f2ec;}
#lnb > ul > li > ul li li a {display: block;padding: 0 25px 10px 22px; color: #666; font-size: 12px;background-color: #f5f2ec; border: none;}
#lnb > ul > li > ul > li li a:hover {color: #d91c1b; border: none;}
#lnb > ul li.noDepth a {background-image: none !important; border: none; }


<%---왼쪽 사이드바---%>
  .side-menu {
            top: 95px;
            width: 45px;
            z-index: 10;
            background: #ff5858;
            border-right: 1px solid rgba(0, 0, 0, 0.07);
            bottom: 50px;
            height: 100%;
            margin-bottom: -70px;
            margin-top: 0px;
            padding-bottom: 70px;
            position: fixed;
            box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%);
            left: 0px;
        }

        .sidebar-inner {
            height: 100%;
            padding-top: 30px;
        }

        #sidebar-menu,
        #sidebar-menu ul,
        #sidebar-menu li,
        #sidebar-menu a {
            border: 0;
            font-weight: normal;
            line-height: 1;
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
            text-decoration: none;
        }

        #sidebar-menu>ul>li a {
            color: #fff;
            font-size: 20px;
            display: block;
            padding: 14px 0px;
            margin: 0px 0px 0px 8px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            width: 28px;
            cursor: pointer;
        }

        #sidebar-menu .fas {
            padding-left: 6px;
        }

        /* 사이드 메뉴 */
        input[type="search"] {
            width: 180px;
            margin: 0 auto;
            margin-left: 9px;
            border: 2px solid #797979;
            font-size: 14px;
            margin-top: 10px;
            padding: 4px 0 4px 14px;
            border-radius: 50px;
        }


        .sub_menu {
            margin-top: 50px;
        }

        .left_sub_menu>.sub_menu li:hover {
            color: ff5858;
            background-color: #e1e1e1;
        }

 .has_sub{
            width: 100%;
        }

        .overlay {
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }
        .big_menu {
            cursor: pointer;
        }

</style>
<script>
(function($){
  
  var lnbUI = {
    click : function (target, speed) {
      var _self = this,
          $target = $(target);
      _self.speed = speed || 300;
      
      $target.each(function(){
        if(findChildren($(this))) {
          return;
        }
        $(this).addClass('noDepth');
      });
      
      function findChildren(obj) {
        return obj.find('> ul').length > 0;
      }
      
      $target.on('click','a', function(e){
          e.stopPropagation();
          var $this = $(this),
              $depthTarget = $this.next(),
              $siblings = $this.parent().siblings();
        
        $this.parent('li').find('ul li').removeClass('on');
        $siblings.removeClass('on');
        $siblings.find('ul').slideUp(250);
        
        if($depthTarget.css('display') == 'none') {
          _self.activeOn($this);
          $depthTarget.slideDown(_self.speed);
        } else {
          $depthTarget.slideUp(_self.speed);
          _self.activeOff($this);
        }
        
      })
      
    },
    activeOff : function($target) {
      $target.parent().removeClass('on');
    },
    activeOn : function($target) {
      $target.parent().addClass('on');
    }
  };
  
  // Call lnbUI
  $(function(){
    lnbUI.click('#lnb li', 300)
  });
  
}(jQuery));

</script>
</head>
<body>

<h2>악기마루</h2>
<div id="header"> 
<ul class="one">
  <li id = "navbar_top"><a href="#">악기나라</a> 
    <ul class="two">
       <li><a href="#">칼림바</a>
       <ul class="three">
         <li><a href="#">삼익칼림바</a></li>
         <li><a href="#">세가칼림바</a></li>
         <li><a href="#">키미칼림바</a></li>
         </ul>
       </li>
       <li><a href="#">플룻</a>
        <ul class="three">
         <li><a href="#">Borthers</a></li>
         <li><a href="#">Yamaha</a></li>
         <li><a href="#">Gemeinhardt</a></li>
         </ul>
       </li>
       <li><a href="#">색소폰</a>
         <ul class="three">
         <li><a href="#">Yamaha</a></li>
         <li><a href="#">야나기사</a></li>
         <li><a href="#">파리 셀마</a></li>
         </ul>
       </li>
    </ul>
  </li>
  <li id ="navbar_top"><a href="#">악기악보</a>
   <ul class="two">
   <li><a href="#">칼림바악보</a>
   <li><a href="#">플룻악보</a>
   <li><a href="#">색소폰악보</a>
  </ul>
  </li>
  <li id = "navbarr_top"><a href="#">자유게시판</a>
   <ul class="two">
   <li><a href="#">QNA</a>
   <li><a href="#">악보요청</a>
   <li><a href="#">문의게시판</a>
  </ul>
  </li>
  <li id = "navbar_top"><a href="#">공지사항</a></li>
  </ul>
  <ul class="util_menu">
  <li id="right"><a href="#">회원가입</a></li>
<li id="right"><a href="#">로그인</a></li>
  </ul>
</div>
<div id="wrapper">
        <div class="topbar" style="position: absolute; top:0;">
            <!-- 왼쪽 메뉴 -->
            <div class="left side-menu">
                <div class="sidebar-inner">
                    <div id="sidebar-menu">
                        <ul>
                            <li class="has_sub"><a href="javascript_:void(0);" class="waves-effect">
                            <span class="material-symbols-outlined">menu</span>
                                <i class="fas fa-bars"></i>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            </div>
   <div class="sub_menu">
<div id="lnb">
<h1>메뉴</h1>
  <ul>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
    
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
        <li><a href="#none">- 2Depth</a>
          <ul>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
            <li><a href="#none">- 3Depth</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
    <li><a href="#none">1Depth</a>
      <ul>
        <li><a href="#none">- 2Depth</a></li>
        <li><a href="#none">- 2Depth</a></li>
      </ul>
    </li>
  </ul>
</div>
</div>
 
</body>
</html>










#html css 적용 #html css javascript #html css 연결 #html css js #html css 예제 사이트 #html css 불러오기 #html css 강의 #html css 연습 사이트 #html css 템플릿 #html css 차이

profile_image 익명 작성일 -

css

#lnb { transform: translateX(-100%); transition: transform .65s ; } #lnb.active { transform: translateX(0); }

​

​

js

$(document).on('click','.waves-effect',(e)=>{ $('#lnb').toggleClass('active'); });

​

이 부분만 추가하시면 됩니다

​

​

전체코드도 올려드릴께요

<!DOCTYPE html> <html lang="en"> <head> <title>악기마루</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <style> ul { list-style: none; margin: 0px; padding: 1px; border: 1px solid #000; } .one { float: left; width: 120%; width: 100%; position: fixed; display: flex; justify-content: center; } /* 전체 메뉴를 float 시킴 */ .one>li { float: left; } /*1단 메뉴를 일렬로 늘어놓기 */ .one ul { display: none; } /*2단, 3단 메뉴를 숨기기 */ .one li:hover>ul { display: block; } /*주 메뉴에 마우스 오버했을 때 부 메뉴 드러내가 */ .two { position: absolute; left: 0px; top: 31px; } /*2단 메뉴 절대 위치*/ .three { position: absolute; left: 93px; top: 0px; } /*3단 메뉴 절대 위치*/ ul li a { text-decoration: none; display: block; width: 90px; height: 30px; line-height: 30px; text-align: center; } .one li { width: 200px; } .one li:hover { background-color: #EAEAEA; } #header { position: relative; margin-left: -10px; margin-top: -10px; zoom: 1; } #header:before, #header:after { content: " "; display: block; clear: both; } #header:after { clear: both; } .navbar_top { text-align: center; } .util_menu { text-align: right; float: right; margin-right: 2%; margin-top: -63px; border: none; } .one li:hover { background-color: #EAEAEA; position: relative; } /* lnb */ #lnb { position: relative; width: 144px; top: -16px; left: 38px; } #lnb h1 { height: 40px; text-align: center; color: #fff; font-size: 20px; line-height: 1.8; letter-spacing: -2px; background: #d71a21; border: none; } #lnb>ul { margin-top: -13px; border: none; } #lnb>ul>li { border-bottom: 1px solid #dcdcdc; } #lnb>ul>li>a { display: block; padding: 14px 35px 14px 15px; color: inherit; font-size: 14px; background: #f5f2ec url(https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225) no-repeat 95% 15px; } #lnb>ul>li a:hover { color: #d91c1b; background-color: #f5f2ec; } #lnb>ul>li.on>a { color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 14px; border: none; width: 91px; } #lnb>ul>li ul { display: none; border: none; margin-top: -1px; } #lnb>ul>li>ul>li>a { display: block; padding: 0 25px 14px 14px; color: inherit; font-size: 12px; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225') no-repeat 95% 1px; } #lnb>ul>li>ul>li>a { color: #d91c1b; background-color: #f5f2ec; width: 102px; } #lnb>ul>li>ul>li.on a { color: #d91c1b; background: #f5f2ec url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 3px; border: none; } #lnb>ul>li>ul li ul { display: none; padding-bottom: 8px; background-color: #f5f2ec; } #lnb>ul>li>ul li li a { display: block; padding: 0 25px 10px 22px; color: #666; font-size: 12px; background-color: #f5f2ec; border: none; } #lnb>ul>li>ul>li li a:hover { color: #d91c1b; border: none; } #lnb>ul li.noDepth a { background-image: none !important; border: none; }
.side-menu { top: 95px; width: 45px; z-index: 10; background: #ff5858; border-right: 1px solid rgba(0, 0, 0, 0.07); bottom: 50px; height: 100%; margin-bottom: -70px; margin-top: 0px; padding-bottom: 70px; position: fixed; box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%); left: 0px; } .sidebar-inner { height: 100%; padding-top: 30px; } #sidebar-menu, #sidebar-menu ul, #sidebar-menu li, #sidebar-menu a { border: 0; font-weight: normal; line-height: 1; list-style: none; margin: 0; padding: 0; position: relative; text-decoration: none; } #sidebar-menu>ul>li a { color: #fff; font-size: 20px; display: block; padding: 14px 0px; margin: 0px 0px 0px 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.05); width: 28px; cursor: pointer; } #sidebar-menu .fas { padding-left: 6px; } /* 사이드 메뉴 */ input[type="search"] { width: 180px; margin: 0 auto; margin-left: 9px; border: 2px solid #797979; font-size: 14px; margin-top: 10px; padding: 4px 0 4px 14px; border-radius: 50px; } .sub_menu { margin-top: 50px; } .left_sub_menu>.sub_menu li:hover { color: ff5858; background-color: #e1e1e1; } .has_sub { width: 100%; } .overlay { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .big_menu { cursor: pointer; } #lnb { transform: translateX(-100%); transition: transform .65s ; } #lnb.active { transform: translateX(0); } </style> <script> (function($) { var lnbUI = { click: function(target, speed) { var _self = this, $target = $(target); _self.speed = speed || 300; $target.each(function() { if (findChildren($(this))) { return; } $(this).addClass('noDepth'); }); function findChildren(obj) { return obj.find('> ul').length > 0; } $target.on('click', 'a', function(e) { e.stopPropagation(); var $this = $(this), $depthTarget = $this.next(), $siblings = $this.parent().siblings(); $this.parent('li').find('ul li').removeClass('on'); $siblings.removeClass('on'); $siblings.find('ul').slideUp(250); if ($depthTarget.css('display') == 'none') { _self.activeOn($this); $depthTarget.slideDown(_self.speed); } else { $depthTarget.slideUp(_self.speed); _self.activeOff($this); } }) }, activeOff: function($target) { $target.parent().removeClass('on'); }, activeOn: function($target) { $target.parent().addClass('on'); } }; // Call lnbUI $(function() { lnbUI.click('#lnb li', 300) }); $(document).on('click','.waves-effect',(e)=>{ $('#lnb').toggleClass('active'); }); }(jQuery)); </script> </head>
<body> <h2>악기마루</h2> <div id="header"> <ul class="one"> <li id="navbar_top"><a href="#">악기나라</a> <ul class="two"> <li><a href="#">칼림바</a> <ul class="three"> <li><a href="#">삼익칼림바</a></li> <li><a href="#">세가칼림바</a></li> <li><a href="#">키미칼림바</a></li> </ul> </li> <li><a href="#">플룻</a> <ul class="three"> <li><a href="#">Borthers</a></li> <li><a href="#">Yamaha</a></li> <li><a href="#">Gemeinhardt</a></li> </ul> </li> <li><a href="#">색소폰</a> <ul class="three"> <li><a href="#">Yamaha</a></li> <li><a href="#">야나기사</a></li> <li><a href="#">파리 셀마</a></li> </ul> </li> </ul> </li> <li id="navbar_top"><a href="#">악기악보</a> <ul class="two"> <li><a href="#">칼림바악보</a> <li><a href="#">플룻악보</a> <li><a href="#">색소폰악보</a> </ul> </li> <li id="navbarr_top"><a href="#">자유게시판</a> <ul class="two"> <li><a href="#">QNA</a> <li><a href="#">악보요청</a> <li><a href="#">문의게시판</a> </ul> </li> <li id="navbar_top"><a href="#">공지사항</a></li> </ul> <ul class="util_menu"> <li id="right"><a href="#">회원가입</a></li> <li id="right"><a href="#">로그인</a></li> </ul> </div> <div id="wrapper"> <div class="topbar" style="position: absolute; top:0;"> <!-- 왼쪽 메뉴 --> <div class="left side-menu"> <div class="sidebar-inner"> <div id="sidebar-menu"> <ul> <li class="has_sub"> <a href="javascript_:void(0);" class="waves-effect"> <span class="material-symbols-outlined">menu</span> <i class="fas fa-bars"></i> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="sub_menu"> <div id="lnb"> <h1>메뉴</h1> <ul> <li><a href="#none">1Depth</a> <ul> <li><a href="#none">- 2Depth</a> <ul> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> </ul> </li> <li><a href="#none">- 2Depth</a> <ul> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> </ul> </li> <li><a href="#none">- 2Depth</a></li> <li><a href="#none">- 2Depth</a></li> </ul> </li> <li><a href="#none">1Depth</a> <ul> <li><a href="#none">- 2Depth</a> <ul> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> </ul> </li> <li><a href="#none">- 2Depth</a> <ul> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> <li><a href="#none">- 3Depth</a></li> </ul> </li> </ul> </li> <li><a href="#none">1Depth</a> <ul> <li><a href="#none">- 2Depth</a></li> <li><a href="#none">- 2Depth</a></li> </ul> </li> <li><a href="#none">1Depth</a> <ul> <li><a href="#none">- 2Depth</a></li> <li><a href="#none">- 2Depth</a></li> </ul> </li> </ul> </div> </div> </body> </html>

​

연관된 질문 답변 리스트

html, css, js 질문

... 만약, 를 foreach 안으로 옮겨 반복해도 세로로 나온다면 css 부분을 살펴봐야하는데 img 태그에 적용되어있는 class="form-image" 에 어떤 속성들이...

HTML+CSS+JS관련 질문입니다.

> love 출석부 로그인 h1{ position: absolute; left: 650px; } let name =document.getElementById("samename") alert(name.values+"님 환영합니다.") event.preventDefault...

html/css/js 질문합니다.

~생략 hi index.html ------------------- body span { font-size: 20px; color: red; } .effct { font-size: 30px; color: blue; styles.css -------------------- 그리고 마지막으로...

html css js 질문

... it html css js 있어요 안녕하세요! 웹사이트를 만들어보고 싶으시다니 멋지세요!! 본인이 하고 싶은 일을 찾기가 힘든데 찾으신 것 같아서 부럽습니당 ㅎㅎ 하시고 싶으신일이...

html & css & js 질문

... 딴건 거의 다 됬고(html, css) 문제는 이제 js인데요, 제가 만들고 싶은... 아마 질문자님께서 수정한 코드에 수정된 반복문만 오치시면...

프레임워크와 html,css,js 질문

... 프레임워크가 웹개발에 사용된다고들었는데 예를들어서 java spring을 사용한다고 가정하면 html,css,js등등은 사용하지않고도 프론트엔드 역할을 할수있는건가요?? 2....