lhnav

by ian_smithz

HTML

<div class="row row--neg-margin">

	<div class="ln__container medium-3 small-12 column">

				<div class="ln__col ln__col--alt">
			<h2 class="ln__alt">Browse Help</h2>
			<div class="ln__section">
				<div class="ln__mod">
					<h3 class="ln__cat">ABOUT US</h3>
					<ul class="n ln__cats">
						<li><a href="#"><span class="ln__facet">About Us</span></a></li>
						<li><a href="#"><span class="ln__facet">Press Office</span></a></li>
						<li><a href="media/wysiwyg/pdf_docs/Kingfisher_MSA_statement_2017.pdf" target="_blank" rel="noopener noreferrer"><span class="ln__facet">Modern Slavery Statement</span></a></li>
					</ul>
				</div>
				<div class="ln__mod">
					<h3 class="ln__cat">MY SERVICES</h3>
					<ul class="n ln__cats">
						<li><a href="#"><span class="ln__facet">My Account</span></a></li>
						<li><a href="#"><span class="ln__facet">My Saved List</span></a></li>
					</ul>
				</div>
				<div class="ln__mod">
					<h3 class="ln__cat">SUPPORT</h3>
					<ul class="n ln__cats">
						<li><a href="#"><span class="ln__facet">Contact Us</span></a></li>
						<li><a href="#"><span class="ln__facet">Delivery Information</span></a></li>
						<li><a href="#"><span class="ln__facet">Health and Safety</span></a></li>
						<li><a href="#"><span class="ln__facet">Help Centre</span></a></li>
						<li><a href="#"><span class="ln__facet">Returns Information</span></a></li>
					</ul>
				</div>
				<div class="ln__mod">
					<h3 class="ln__cat">WEBSITE INFORMATION</h3>
					<ul class="n ln__cats">
						<li><a href="#"><span class="ln__facet">FAQs</span></a></li>
						<li><a href="#"><span class="ln__facet">Payment Information</span></a></li>
						<li><a href="#"><span class="ln__facet">Secure Ordering</span></a></li>
					</ul>
				</div>
				<div class="ln__mod">
					<h3 class="ln__cat">COMMUNITY</h3>
					<ul class="n ln__cats">
						<li><a href="#"><span class="ln__facet">Affiliates</span></a></li>
						<li><a href="#"><span class="ln__facet">Rate and...

CSS

<style>

.page {
    background-color: #f6f6f6;
}

.page-header {
    background-color: #fff;
}


@media only screen and (min-width: 768px) {

    .main-container {
        padding: 24px 12px;
    }
}

@media only screen and (min-width: 1025px) {
    .ln__container {
        width: 20%;
    }

    .help-zone-container {
        width: 80%;
    }
}

.row.row--neg-margin {
    margin-left: -6px;
    margin-right: -6px;
    width: auto;
}

@media only screen and (max-width: 767px) {
    .ln__section {
        display: none;
        padding-bottom: 12px;
    }
}

@media only screen and (max-width: 767px) {
    h2.ln__alt.ln--open {
        border-bottom: 1px solid #d1d1d1;
    }

    h2.ln__alt.ln--open:after {
        content: '\e816';
    }
}

.ln__col,.ln__mod,.ln__top {
    position: relative
}

.ln__col {
    background-color: #FFF;
    margin-bottom: 12px;
    border: 1px solid #d1d1d1;
}

.ln__col h1,.ln__col h2,.ln__col h3,.ln__col h4 {
    text-transform: uppercase;
    color: #0053a0;
    position: relative
}

.ln__col h2 {
    text-transform: none;
    margin: 14px 12px 12px
}

.ln__col h2.ln__alt {
    font-size: 22px;
    line-height: 22px
}

.ln__mod {
    margin: 12px 9px;
    border-top: 2px solid #d1d1d1
}

.ln__cat {
    margin: 12px 12px 2px 3px;
    font-size: 18px;
    line-height: 18px
}

@media only screen and (min-width: 768px) {
    .ln__cat.ln__cat--fh {
        margin: 12px 12px 12px 3px
    }
}

.ln__cat a {
    text-decoration: none
}

ul.ln__cats li {
    border-top: 1px solid #d1d1d1;
    position: relative;

    margin-left: 0;
}

.ac__body ol.no-bullet li, .ac__body ul.no-bullet li, .ac__body_alt ol li, .ac__body_alt ul li, ol.n li, ul.n li {
    list-style: none;
}

ul.ln__cats li:first-child {
    border: none
}

ul.ln__cats li:after {
    position: absolute;
    top: 35%;
    right: 10px;
    font-family: font-awesome-custom;
    font-style: normal;
    font-weight: 600;
    color: #636363;
    speak: none;
    content: '\e814';
  ...

JavaScript

var f = function() {
	  var t = jQuery(window).width();
	  var s = jQuery(".ln__section");
	  if (t < 640) {

	    jQuery(this).toggleClass("ln--open");
	    s.stop().slideToggle("slow");
	  }
	  m();
	};

	var m = function() {

	  var B = jQuery(".ln__action");
	  var v = jQuery(".ln__col", "h2");
	  var z = jQuery(".ln__top");
	  var y = jQuery(".ln__section");
	  var s = jQuery(".ln--open");
	  var u = jQuery(window).width();
	  var w;

	  jQuery(window).on("load", function() {
	   // A();
	  });


	  jQuery(window).on("resize", function() {
	    clearTimeout(w);
	    w = setTimeout(function() {
	      u = jQuery(window).width();
	      if (u > 640) {
	        A();
	      }
	    }, 250);
	  });


	  function A() {

	    if (u > 640) {

	      //t.removeClass("btn--expanded").find("i").removeClass("icon-minus");
	      //x.removeClass("hide").find(".ln--open").removeClass("ln--open");

	      jQuery(".ln__top h2").remove();
	      y.removeAttr("style");
	      jQuery(".ln__alt").removeClass("ln--open");
	      
	    }

/*	    if (u < 640) {
	      jQuery(".ln__col:not(.ln__col--cats, .ln__col--alt)").addClass("hide");
	    }*/

	  }


	}; // end var m


	jQuery(".ln__alt").on("click", f);