在内容左侧对齐菜单

Question

I have a gallery of shop items and a menu that has the categories of all the shop items. I want to align the menu on the left side of the shop items like in the example below. I've tried float:left however then the menu doesn't adjust to the page size like it's supposed to. So what would be the best way to do this?

what I want it to look like

Fiddle of all code together - https://jsfiddle.net/8m4hudmx/

separate fiddle of product gallery - https://jsfiddle.net/wzahpmff/

separate fiddle of shop sidebar menu - https://jsfiddle.net/dq1123ps/

html of shop sidebar menu

 <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 of shop sidebar menu

 .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; } 

Answer 1

Here is a fiddle,

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

Add position:absolute and left:0px; to the CSS .shop-sidebar with z-index:100 value to float the menu over other elements.

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

And add the following css to give margin to first child of all the products

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