JSFiddle - React, Tailwind, and code Playground

by Carlos Medina

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

    <header>
    <div class="navHolder">
    <div class="navbar">
        <img class="navToggle" src="menu-icon.png">
        <ul class="nav">
            <img src="home-icon.png" class="navImg1">
                <li class="navHover1">Home</li>
            <img src="about-icon.png" class="navImg2">
                <li class="navHover2">About</li>
            <img src="photo-icon.png" class="navImg3">
                <li class="navHover3">Photos</li>
            <img src="website-icon.png" class="navImg4">
                <li class="navHover4">Website</li>
            <img src="contact-icon.png" class="navImg5">
                <li class="navHover5">Contact</li>
        </ul>
    </div>  
    </div>
    </header>

JavaScript

//open and close navigation
var navOpen = function(){
$('.navToggle').click(function(){
    $('.nav').toggle();
    console.log("i have been clicked");
});
//on hover, show description of icon    
$('.navImg1').hover(function(){
    $('.navHover1').slideToggle(100);
});

$('.navImg2').hover(function(){
    $('.navHover2').slideToggle(100);
});

$('.navImg3').hover(function(){
    $('.navHover3').slideToggle(100);
});

$('.navImg4').hover(function(){
    $('.navHover4').slideToggle(100);
});

$('.navImg5').hover(function(){
    $('.navHover5').slideToggle(100);
});

};
//hide all when document loads
$('.navHover1').hide();
$('.navHover2').hide();
$('.navHover3').hide();
$('.navHover4').hide();
$('.navHover5').hide();
$('.nav').hide();
$(document).ready(navOpen);