Navigation menu for E-commerce

      No Comments on Navigation menu for E-commerce

Navigation menu for E-commerce:

  • Top categories
  • Mobiles & Electronics
  • Home & Decor
  • Computer & Gaming
  • Renting
  • MORE CATEGORIES

    See More

    Navigation menu for E-commerce:

    HTML:

    <div class="side_nav_sc">
     <li class="side_nav_sc_li"><a href='#'><img src="star1.png" alt="Navigation menu for E-commerce"  /> Top categories</a></li>
    <li class="side_nav_sc_li"><a href='#'><img src="star1.png" alt="Navigation menu for E-commerce"   /> Mobiles & Electronics</a></li>
    <li class="side_nav_sc_li"><a href='#'><img src="star1.png" alt="Navigation menu for E-commerce" /> Home & Decor</a></li>
    <li  class="side_nav_sc_li"><a href='#'><img src="star1.png" alt="Navigation menu for E-commerce"  /> Computer & Gaming</a></li>
    <li class="side_nav_sc_li"><a href='#'><img src="star1.png" alt="Navigation menu for E-commerce"  /> Renting</a></li><br>
    <p class="more_sc">MORE CATEGORIES</p>
    <li class="small_link_sc">Men's fashion</li>
    <li class="small_link_sc">Women's fashion</li>
    <li class="small_link_sc">Kid's fashion</li>
    <li class="small_link_sc">Books Media Music</li>
    <li class="small_link_sc">Sports & Outdoor</li>
    <li class="small_link_sc">Travell</li>
    <a href='#' style="color:blue;">See More</a>
    </div>
    

    CSS:

    .side_nav_sc
    {
    margin:10px;
    width:180px;
    background-color:#fff;
    border:solid 1px lightgray;
    box-shadow:1px 1px 4px 1px #ccc;
    padding:20px 10px;
    color:#000;
    border-radius:6px;
    text-align:left;
    }
    .side_nav_sc_li
    {
    list-style-type:none;
    margin:15px 0px;
    }
    .side_nav_sc a
    {
     color:#333;
     font-size:13px;
     margin:0px 3px;
    }
    .side_nav_sc img
    {
     border-radius:100%;
     border:solid 1px lightgray;
     height:20px;
     width:20px;
    }
    .more_sc
    {
    font-weight:lighter;
    font-size:13px;
    }
    .small_link_sc
    {
    list-style-type:none;
    color:#666;
    font-size:12px;
    margin:20px;
    }
    

    Leave a Reply

    Your email address will not be published. Required fields are marked *