>

html+jquery 메뉴가 필요해  응답 모드로 이동하면 일부 메뉴 만 표시되고 다른 메뉴는이 링크와 유사하게 자동으로 생성되어야하는 위치에 있어야합니다.

https://www.amazon.com/stores/Ozeri/node/2598028011

브라우저를 확대 또는 축소하는 경우 생성 된 옵션에 자동으로 메뉴를 추가해야합니다.

PS : [링크가 작동하지 않으면 복사하여 붙여 넣기]

내 소스 코드 확인

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Ozeri :: Ozeri Pro II Digital Kitchen Scale with Removable Glass Platform and Countdown Kitchen Timer (1 g to 12 lbs Capacity) </title>
    <link rel="icon" type="image/ico" href="img/favicon.png" />
    <!-- web-fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700" rel="stylesheet" type="text/css">
    <!-- font-awesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">   
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Style CSS -->
    <link href="css/ozeri-style.css" rel="stylesheet">
    
    <link href="css/quick-view-img.css" rel="stylesheet">
        <!-- slider -->
    <link href="css/thumbs2.css" rel="stylesheet" />
    <link href="css/thumbnail-slider.css" rel="stylesheet" />
    <script src="css/thumbnail-slider.js" type="text/javascript"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
.popup-big-img { width: auto; height: 500px; text-align: center}
.popup-big-img img{ width: auto; height: 100%; }
.popup-small-img{width: 50px;height: 50px; margin:5px;float: left; border: 2px solid #ccc;}
.popup-small-img img{ width: 100%; height: 100%}
.modal-dialog.pro-popup{ width: 95%}
.popup-small-img:hover{border: 2px solid #004b91; cursor: pointer}
.popup-small-img-test{border: 2px solid #ff8f00;}
.modal-header.no-border{ border: none;}
h4.modal-title{ color: #000; font-size: 16px; font-weight: 400; margin: 10px 5px}
.a-row {margin-left: 0px; margin-top: 0px;margin-right: 10px;float: left; }
.color-select{float: left; width: 70%}
.a-form-label {font-weight: 700;}
.manufacturer img{ text-align: center; display: inline-table;}
.product-color{ width: 100%;}
</style>
</head>
<body>
<div class="container-inner">
<nav class="navbar m-menu navbar-default">
    <div class="container-fluid container-inner">
        <div class="search-input hidden-mobile" style="display: none">
			<input class="form-control top-search-box" placeholder="Search" aria-label="Search" type="text">
		</div>
        <!-- Brand and toggle get grouped for better mobile display -->
        <!--<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>--> 
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="#navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left main-nav">
                <li><a href="category.html" title="Barware">Barware</a></li>
                <li class="dropdown dropdown-toggle"><a href="category.html" data-toggle="dropdown" title="Glassware">Glassware <span><i class="fa fa-angle-down"></i>
                </span></a>
                    <ul class="dropdown-menu">
						<li><a href="category.html" title="Moderna Artisan Glassware">Moderna Artisan Glassware</a></li>
						<li><a href="category.html" title="Serafina Artisan Glassware">Serafina Artisan Glassware</a></li>
						<li><a href="category.html" title="Curva Artisan Glassware">Curva Artisan Glassware</a></li>
                    </ul>	
                </li>
                <li><a href="category.html" title="Kitchen Scales">Kitchen Scales</a></li>
                <li><a href="category.html" title="Kitchecn Accessories">Kitchen Accessories</a></li>
                <li class="dropdown dropdown-toggle">
                <a href="category.html" data-toggle="dropdown" title="Cookware">Cookware <span><i class="fa fa-angle-down"></i>
				</span></a>
                    <ul class="dropdown-menu">
						<li><a href="category.html" title="Ceramic Earth Series">Ceramic Earth Series</a></li>
						<li><a href="category.html" title="Stone Earth Series">Stone Earth Series</a></li>
						<li><a href="category.html" title="Stainless Steel Series">Stainless Steel Series</a></li>
						<li><a href="category.html" title="Professional Series">Professional Series</a></li>
                    </ul>	
                </li>
                <li><a href="category.html" title="Oscillatting Fans">Oscillatting Fans</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
			  <li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
				<ul class="dropdown-menu dropdown-menu-right">
				  <li><a href="#">Bath and Personal Care</a></li>
				  <li><a href="#">Novelty</a></li>
				</ul>
			  </li>
			</ul>
        </div>
        <!-- .navbar-collapse -->
        </div>
	</nav>
</div>
</body>
</html>

  • 답변 # 1

    시도

    $(document).ready(function(){
         var item_width = $('#menu_ul li').width();
         var item_count = ($( "#menu_ul li" ).length);
         var nav_width_og = $('.menu').width();
         var nav_width = $('.menu').width();
          
         if ((item_width*(item_count+1)) > nav_width ){
             $('#more').appendTo('body');
          $('#more').hide();
        }
          
         for(var i = 0; i < item_count; i++) {
          nav_width = $('.menu').width();
        item_width = $('#menu_ul li').width();
        item_count = ($( "#menu_ul li" ).length); 
           
         if (nav_width<(item_width*item_count)){
        $('#menu_ul li').not('#more').last().appendTo($('.overflow'));
          
          $('#more').appendTo($('#menu_ul'));
          $('#more').show();
        }
         }
        
         
        $(window).resize(function(){ 
          
        nav_width = $('.menu').width();
        item_width = $('#menu_ul li').width();
        item_count = ($( "#menu_ul li" ).length);
        
        if (nav_width<(item_width*item_count)){
        $('#menu_ul li').not('#more').last().appendTo($('.overflow'));
          
          $('#more').appendTo($('#menu_ul'));
          $('#more').show();
        }
          
        if (nav_width>(item_width*item_count)+(item_width-1)){
         $('.overflow li').last().appendTo($('#menu_ul'));
          
          $('#more').appendTo($('#menu_ul'));
        }
           
        if (nav_width == nav_width_og ){
             $('#more').appendTo('body');
          $('#more').hide();
        }
          
        });
          
          $('#more').click(function(){
           $('.overflow').slideToggle(); 
          });
          });
    
    
    .menu{
      position:relative;
      max-width:600px;
      margin:0 auto;
      background:red;
     font-size:0px;
    }
    ul{
      list-style:none;
      padding:0;
    }
    li{
      display:inline-block;
      background:green;
      font-size:16px;
      width:100px;
      text-align:center;
    }
    .overflow{
      position:absolute;
      right:0;
      display:none;
    }
    .overflow li{
      display:block;
        background:yellow;
    }
    #more{
      background:blue;
      display:none;
      float:right;
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="menu">
      <ul id="menu_ul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
         <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li id="more">more</li>
      </ul>
         <ul class="overflow">
    </ul>
    </div>
    
    

  • 답변 # 2

    주어진 아마존 링크와 마찬가지로 'MORE'라는 메뉴가 있습니다. 'MORE'는 큰 화면/데스크톱에있는 동안 'Novelty'하위 메뉴를 갖습니다. 모바일/탭 화면 크기와 같이 작은 화면으로 들어가면 'MORE'를 클릭하면 모달 메뉴 표시 줄이 나타납니다. 나는 당신이 이것을 원한다고 생각합니다.

    이 작업을 수행하려면 JS/jQuery가 필요합니다. 1 단계 : 큰 화면/데스크톱 크기의 경우 CSS 드롭 다운 메뉴 만 있으면됩니다. ul/li를 사용하는 하위 메뉴가있는 'MORE'만 있으면 bootstarp을 사용하고있을 수 있습니다.

    2 단계 : 메뉴 항목이있는 모달 (bootstarp 모달 또는 다른 모달)과 '닫기'버튼이있는 숨겨진 div가 모달을 닫을 수 있습니다. clcik 'MORE'링크에서 JS로 모달을 호출하십시오. JS로 더 작은 화면 크기를 확인해야합니다. Bootstap 모달에는 HTML 태그 속성 방식이나 호출 및 닫기 방법이 있습니다. 부트 스트랩 4 모달 문서 : https://getbootstrap.com/docs/4.0/components/modal/

    필요에 따라 CSS로 모달의 스타일을 지정할 수 있습니다. 많은 jQuery 모달 플러그인이 있거나 부트 스트랩 모달을 사용할 수 있습니다.

  • 이전 javascript - div 크기 조정이 무시되고 있습니다
  • 다음 Taskmanager dump - 작업 관리자 덤프 - java/eclipse 메모리 분석기로 분석 할 수 있습니까?