html - 在内容左侧对齐菜单

标签 html css list menu alignment

我有一个商店商品库和一个包含所有商店商品类别的菜单。我想将菜单对齐到商店商品的左侧，如下例所示。我试过 float:left 但是菜单没有像预期的那样调整到页面大小。那么最好的方法是什么？

我希望它看起来像什么 enter image description here

将所有代码拼凑在一起 - https://jsfiddle.net/8m4hudmx/

产品库的单独 fiddle - https://jsfiddle.net/wzahpmff/

商店侧边栏菜单的单独 fiddle - https://jsfiddle.net/dq1123ps/

商店侧边栏菜单的html

<div class='shop-sidebar'>
  <ul class='shop-nav'>
    <li class="active"><a href="#">What's New</a></li>
    <li class='w-sub' data-id='shop-categories'>
      <svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
      <input type="checkbox" id="categories" />
      <label id="label" for="categories">Categories</label>
      <ul id="subList">
        <li>
          <input type="checkbox" id="all" />
          <label id="allLabel" for="all">All</label>
        </li>
        <li>
          <input type="radio" name= "category"  id="category1" />
          <label id="category1Label" for="category1">Category 1</label>
          <ul id="subListCategory1">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
            <li><a href="#">Sub Category 2</a></li>
            <li><a href="#">Sub Category 3</a></li>
            <li><a href="#">Sub Category 4</a></li>
            <li><a href="#">Sub Category 5</a></li>
            <li><a href="#">Sub Category 6</a></li>
            <li><a href="#">Sub Category 7</a></li>
            <li><a href="#">Sub Category 8</a></li>
            <li><a href="#">Sub Category 9</a></li>
          </ul>
        </li>
        <li>
          <input type="radio" name= "category"  id="category2" />
          <label id="category2Label" for="category2">Category 2</label>
          <ul id="subListCategory2">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
            <li><a href="#">Sub Category 2</a></li>
          </ul>
        </li>
        <li>
          <input type="radio" name= "category" id="category3" />
          <label id="category3Label" for="category3">Category 3</label>
          <ul id="subListCategory3">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
          </ul>

        </li>

      </ul>
    </li>

  </ul>
</div>

商店侧边栏菜单的CSS

.shop-sidebar {
width: 30%;
width: calc(295px);
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}

input[type='radio'] {
  display: none;
}

input[type='checkbox'] {
  display: none;
}

#subList, 
#subListCategory1,
#subListCategory2,
#subListCategory3 {
  display: none;
}

#categories:checked ~ #subList {
  display: block;
}

#category1:checked ~ #subListCategory1 {
  display: block;
}

#category2:checked ~ #subListCategory2 {
  display: block;
}

#category3:checked ~ #subListCategory3 {
  display: block;
}

最佳答案

这是一个 fiddle ，

https://jsfiddle.net/nadirlaskar/8m4hudmx/1/

将 position:absolute 和 left:0px; 添加到 CSS .shop-sidebar 和 z-index:100 使菜单 float 在其他元素上的值。

.shop-sidebar {
  position:absolute;
  left:0px;
  z-index:100;
}

并添加以下 css 为所有产品的第一个 child 提供边距

.shop-gallery .product:first-child{
  margin-left:20%;
}


var $parent = $(".shop-gallery"),
  $items = $parent.find(".product"),
  $loadMoreBtn = $("#load-more-comments"),
  maxItems = 4,
  hiddenClass = "visually-hidden";

// add visually hidden class to items beyond maxItems
$.each($items, function(idx, item) {
  if (idx > maxItems - 1) {
    $(this).addClass(hiddenClass);
  }
});

// onclick of show more button show more = maxItems
// if there are none left to show kill show more button
$loadMoreBtn.on("click", function(e) {
  $("." + hiddenClass).each(function(idx, item) {
    if (idx < maxItems) {
      $(this).removeClass(hiddenClass);
    }
    // kill button if no more to show

  });
  if ($("." + hiddenClass).length === 0) {
    $loadMoreBtn.hide();
  }
});
.shop-sidebar {
position:absolute;
left:0px;
z-index:100;
width: 20%;
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}

input[type='radio'] {
  display: none;
}

input[type='checkbox'] {
  display: none;
}

#subList, 
#subListCategory1,
#subListCategory2,
#subListCategory3 {
  display: none;
}

#categories:checked ~ #subList {
  display: block;
}

#category1:checked ~ #subListCategory1 {
  display: block;
}

#category2:checked ~ #subListCategory2 {
  display: block;
}

#category3:checked ~ #subListCategory3 {
  display: block;
}


.product-shade {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s;
}

.product-shade:hover {
  opacity: 1;
}

.product img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: auto;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
}

.product {
  width: 21%;
  height: 0;
  padding-top: 30%;
  display: inline-block;
  position: relative;
  margin-bottom: 3.5%;
  cursor: pointer;
}

.product-shade h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  font-family: 'maison', sans-serif;
  font-size: 14px;
  color: #000;
  line-height: 18px;
  margin: 0;
  text-align: center;
  padding: 0 12px;
}

.product-shade h2 span {
  display: block;
  font-weight: normal;
  font-style: italic;
}

.product-shade h2 span.price {
  padding-top: 9px;
  font-style: normal;
  color: #ef9292;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.shop-gallery .product:first-child{
  margin-left:20%;
}



Here is the whole snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='shop-sidebar'>
  <ul class='shop-nav'>
    <li class="active"><a href="#">What's New</a></li>
    <li class='w-sub' data-id='shop-categories'>
      <svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
      <input type="checkbox" id="categories" />
      <label id="label" for="categories">Categories</label>
      <ul id="subList">
        <li>
          <input type="checkbox" id="all" />
          <label id="allLabel" for="all">All</label>
        </li>
        <li>
          <input type="radio" name= "category"  id="category1" />
          <label id="category1Label" for="category1">Category 1</label>
          <ul id="subListCategory1">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
            <li><a href="#">Sub Category 2</a></li>
            <li><a href="#">Sub Category 3</a></li>
            <li><a href="#">Sub Category 4</a></li>
            <li><a href="#">Sub Category 5</a></li>
            <li><a href="#">Sub Category 6</a></li>
            <li><a href="#">Sub Category 7</a></li>
            <li><a href="#">Sub Category 8</a></li>
            <li><a href="#">Sub Category 9</a></li>
          </ul>
        </li>
        <li>
          <input type="radio" name= "category"  id="category2" />
          <label id="category2Label" for="category2">Category 2</label>
          <ul id="subListCategory2">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
            <li><a href="#">Sub Category 2</a></li>
          </ul>
        </li>
        <li>
          <input type="radio" name= "category" id="category3" />
          <label id="category3Label" for="category3">Category 3</label>
          <ul id="subListCategory3">
            <li><a href="#">All</a></li>
            <li><a href="#">Sub Category 1</a></li>
          </ul>

        </li>

      </ul>
    </li>

  </ul>
</div>




<div class="shop-gallery">
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class="product">
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class='product'>
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
  <div class='product'>
    <a href="#" target="_blank">
      <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
      <div class='product-shade'>
        <h2>Lack of Color<span>Silver Haze Felt Wool Fedora</span><span class='price'>$35</span></h2>
      </div>
    </a>
  </div>
</div>
<button id="load-more-comments">Load More</button>

关于html - 在内容左侧对齐菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41577045/

上一篇：html - 图片不会在我的电子邮件中居中。使用分区。 CSS/HTML

下一篇：css - 底部固定元素在移动设备上消失

相关文章：

php - AJAX responseText 在对 .php 的 GET 请求后未定义

PHP 页面未使用可见性 :none or display:none 隐藏 DIV

html - iframe 小部件 facebook 时间线响应

python - 在 Python 2 中搜索字典

list - 在 clojure 中，为什么 "some"函数不能在集合上始终如一地工作？

css - ionic 复选框内的 HTML 输入

javascript - 仅在输入完成时关闭/隐藏 div，没有提交按钮

CSS:div 垂直固定，但水平移动

javascript - 使用javascript更改div的偏移量

java - 递归问题

©2024 IT工具网  联系我们