Question

我需要一个菜单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>

Answer 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>

Answer 2

就像在给定的Amazon链接中一样，它具有一个名为“更多”的菜单。在大屏幕/台式机中，“更多”子菜单为“新颖”。如果它进入较小的屏幕（如移动/标签屏幕尺寸），则单击“更多”，将出现一个模式菜单栏。我想，你想要这样。

为此，您将需要JS / jQuery。步骤1：对于大屏幕/桌面尺寸，只需CSS下拉菜单即可。使用ul / li在子菜单中添加“ MORE”，您可能正在使用bootstarp。

第2步：您可以使用模式（bootstarp模态或任何其他模态）的隐藏div，该模式内部具有菜单项，并带有“关闭”按钮以关闭模态。在clcik的“更多”链接上，只需调用JS的模式即可。您需要通过JS检查较小的屏幕尺寸。 Bootstap模态具有HTML标记属性方式或some methods来调用和关闭。引导程序4模态文档：https://getbootstrap.com/docs/4.0/components/modal/

您可以根据需要通过CSS设置模式样式。 jQuery模态插件很多，或者可以使用引导模态。

Answer 3

您已要求为item2和其他项提供任何下拉菜单。这将起作用：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand -->


        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Barware</a>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Glassware</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kitchen Scales</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kitchen Accessories</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    cookware<div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Osciallating Fans</a>
            </li>
        </ul>
    </nav>
    <br>


    </div>
</body>

</html>

https://jsfiddle.net/sugandhnikhil/kdbnq2tx/

菜单设计-添加更多菜单选项

3 个答案: