Menu

by Danielle Parkinson

HTML

@{
    ViewBag.Title = "Engine Room";
}

<div class="menu-container">
   <span class="menu-open">
       <span class="fa fa-navicon" aria-hidden="true"></span>
   </span>
</div>

<div class="nav-container">

    <div class="nav-container-header">
        <div class="close-menu-container">
            <span class="menu-close">
                <span class="fa fa-navicon" aria-hidden="true"></span>
                <span class="menu-label-close">Hide</span>
            </span>
         </div>
        <span class="menu-close-button"><i class="fa fa-close" aria-hidden="true"></i>
        </span>
    </div>

    <div class="nav-section" style="padding-top: 20px">
         <ul>
             <a href="#section-2">
                <span class="fa fa-clipboard fa-fw ::before" aria-hidden="true"></span>Team Up &amp; Set Expectations
             </a>
             <li><a href="#section-2/slide-1">SLA/Contracting</a></li>
             <li> <a href="#section-2/slide-2">Setup Meetings</a></li>
             <li> <a href="#section-2/slide-3">Stakeholder Consultation</a></li>
         </ul>
    </div>

    <div class="nav-section">
        <ul>
            <a href="#section-3">
                <span class="fa fa-calendar fa-fw ::before" aria-hidden="true"></span>Plan Three Steps Ahead
            </a>
            <li> <a href="#section-3/slide-1">Survey Approval &amp; Fizz Configuration</a></li>
            <li> <a href="#section-3/slide-2">Survey Scripting &amp; Launch</a></li>
        </ul>
    </div>

    <div class="nav-section">
        <ul>
            <a href="#section-4">
                <span class="fa fa-gears fa-fw ::before" aria-hidden="true"></span>Roll Out Effective Systems
            </a>
            <li> <a href="#section-4/slide-1">Fizz Implementation: Feedback</a></li>
            <li> <a href="#section-4/slide-2">Business Diagnostics</a></li>
            <li> <a href="#section-4/slide-3">Fizz Implementation: Prioritise</a></li>
            <li> <a...

CSS

@image-path: '/Content/images/';

@import "fonts/fonts.less";

@teal-1: #005e5e;
@teal-2: #00706f;
@teal-3: #008e8d;
@teal-4: #54b0af;
@teal-5: #80bbb7;

@blue: #006EB8;
@yellow: #F59E37;
@red: #B1363B;
@green: #089F62;
@beige: #C9AB8D;


@white: #fff;
@light-grey: #e5e5e5;
@grey: #5d5d5d;
@dark-grey: #333;

.font-family {
    font-family: 'robotolight';
}

.font-header {
    font-family: 'roboto_condensedlight';
}

.transition {
    transition: all 0.2s ease;
}

body {
    color: @white;
    .font-family;
}

a {
    color: @white;
    .transition();

    &:hover, &:focus {
        text-decoration: none;
        color: @teal-5;
    }
}

header {
    position: fixed;
    height: 50px;
    display: block;
    width: 100%;
    background: #f3f3f3;
    z-index: 9;

    h2 {
        float: right;
        margin: 10px;
        color: @teal-3;

            &:hover, &:focus {
            text-decoration: none;
            color: @teal-5;
            }
    }

    #logo {
        margin: 5px 88px;
    }
}
/*MENU OPEN*/
.menu-container {
    height: 50px;
    width: 66px;
    float: left;
    display: inline-block;
    background-color: @grey;
    cursor: pointer;
    position: absolute;
    z-index: 10;
}

span.menu-open {
    height: 50px;
    width: 100%;
    font-size: 1.7em;
    cursor: pointer;
    z-index: 10;
        
        &:hover {
            color: @teal-5;
            cursor: pointer;
            }
}

span.fa-navicon {
   padding: 13.5px 22px;
}

span.menu-label {
    font-family: 'roboto_condensedlight';
    font-size: 0.6em;
    text-align: center;
    display: block;
    cursor: pointer;
    line-height: 5px;
        
        &:hover {
            color: @teal-5;
            cursor: pointer;
            }
}


/*MENU CLOSE*/

 .nav-container-header {
    width: 100%;
    height: 50px;
    background-color: @grey;
        
        .close-menu-container {
            width: 66px;
            float: left;
            display: inline-block;
            cursor:...

JavaScript

$(function () {
    $('#fullpage').fullpage({
        anchors: ['section-1',
            'section-2',
            'section-3',
            'section-4',
            'section-5',
            'section-6',
            'slide-1',
            'slide-2',
            'slide-3',
            'slide-4',
            'slide-5'],
        afterLoad: function (anchor, index) {
            var activeItem;

            activeItem = $('#menu').find('.' + anchor);

            activeItem
                .addClass('active')
                .siblings().removeClass('active');
        }
    });

    $(".modal").on("shown.bs.modal", function () {
        var curModal;
        curModal = this;
        $(".modal").each(function () {
            if (this !== curModal) {
                $(this).modal("hide");
            }
        });
    });

    $('[data-toggle="tooltip"]').tooltip();

    $('.menu-open').click(function () {
        $('.nav-container').addClass('nav-show')
    });

    function removeNavShow() {
        $('.nav-container').removeClass('nav-show');
    }

    $('.menu-close').click(function () {
        removeNavShow();
    });

    $('span.menu-close-button').click(function () {
        removeNavShow();
    });

    $('.nav-container a').click(function () {
        removeNavShow();
    });

    $('#fullpage').click(function () {
        removeNavShow();
    });

    $('header').click(function () {
        removeNavShow();
    });

});