<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="responsive.css" rel="stylesheet" type="text/css">

<script>
$(function(){
    $("#alpha-link").click(function(){ $(".nav-content").hide(); $("#alpha-menu").fadeToggle(); })
    $("#search-link").click(function(){ $(".nav-content").hide(); $("#search-menu").fadeToggle(); })
    $("#filter-link").click(function(){ $(".nav-content").hide(); $("#filter-menu").fadeToggle(); })
})
</script>
    
</head>

<body>
    <div class="content">
        <h1 class="bg-dark text-white my-3">Wank wank wank</h1>
        <p>Let's have a wank</p>
        
    </div>
    
    <div class="bottom-nav">
        <div class="nav-content" id="alpha-menu">A B C D E F G H I<br>J K L M N O P Q R<br>S T U V W X Y Z #<br>Latest | Random</div>
        <div class="nav-content" id="search-menu">SEARCH BOX</div>
        <div class="nav-content" id="filter-menu">Think this is bad? Here's the stuff that <em>didn't</em> get in<br>* Deleted *<br>** Snubbed **<br>*** Pending ***<br>**** Beloved ****</div>
        
        
        <div class="nav-buttons">
            <div class="nav-button" id="alpha-link">Browse</div>
            <div class="nav-button" id="search-link">Search</div>
            <div class="nav-button" id="filter-link">Filters</div>
            <div class="nav-button" id="about-link">About</div>
        </div>
    </div>
</body>
</html>