JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
        <title>MenuMatic Vertical Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="utf-8" />
        <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
        <![endif]-->
</head>
<body>
    
   <div id="container" >           
        
        <!-- BEGIN Menu -->
        <ul id="nav">

            <li><a href="#">Percoidei</a>
        
                <ul>
                    <li><a href="#">Remoras</a>
                        
                    </li>
                    <li><a href="#">Tilefishes</a>
                        
                    </li>
                    <li><a href="#">Bluefishes</a>
                        
                    </li>
                    <li><a href="#">Tigerfishes</a>
                        
                    </li>
        
                </ul>
            </li>
        
            <li><a href="#">Anabantoidei</a>
                <ul>
                    <li><a href="#">Climbing perches</a>
        
                        
                    </li>
                    <li><a href="#">Labyrinthfishes</a>
                        
                    </li>
                    <li><a href="#">Kissing gouramis</a></li>
        
                    <li><a href="#">Pike-heads</a></li>
                    <li><a href="#">Giant gouramis</a></li>
        
                </ul>
            </li>
        
       ...

CSS

html{
    top:0;
    height: 100%;
    text-align:center;
    margin:0 auto;
    padding:0;
    
    overflow:scroll;
}

body {
    top:0;
    height: 100%;
    width:100%;
    margin: 0 auto;
    padding:0;
    text-align:left; 
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:1.5em;
    background: url(../img/2.jpg) no-repeat center center #fff;
}

a:link{ color: #CF7F18; }

a:visited{ color: #AD660C; }

a:hover, a:focus{ color: #FF9814;    text-decoration:none; }

p{    margin:1em 0; }

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{    margin-top:-0.05em;}

h1, h2, h3, h4, h5, h6{ color: #9CA716; margin-bottom:0.5em; }

h1{ font-size:24px;}

h2{    font-size:20px;}

h3{    font-size:18px;}

h4{    font-size:16px;}

h5{    font-size:14px;}

h6{    font-size:12px;}

ol, ul{    margin: 1em 0 1em 2em; }

ol ol, ol ul, ul ol, ul ul{ margin-top:0; margin-bottom:0; }

ol li{    list-style:decimal }
ol li ol li{ list-style:upper-alpha; }
ol li ol li ol li{ list-style:upper-roman; }

ul li{ list-style:disc;}

em{font-style:italic;}

strong{font-weight:bold;}

em strong, strong em{ font-weight:bold; font-style:italic; }

#container {
    display:block;
    position: absolute;
    padding:0;
    width:200px;
    height:100%;
    background:#000;
    margin:00px 0 0 150px;
    border:none;
    
    opacity: 0.80;
    -moz-opacity: 0.90;
    filter: alpha(opacity=90);
}


#footer {
    position: absolute;
    bottom: 0;
    margin:0;
    width:100%;
    text-align:center;
    left:0;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a{
    text-decoration:none;
    display:block;
    padding:10px 20px;
    background-color:#000 ;

}

/* Just main menu links --[for non-javascript users this applies to submenu links as...

JavaScript

/**
 * menuMatic 
 * @version 0.68.3 (beta)
 * @author Jason J. Jaeger | greengeckodesign.com
 * @copyright 2008 Jason John Jaeger
 * @license MIT-style License
 *            Permission is hereby granted, free of charge, to any person obtaining a copy
 *            of this software and associated documentation files (the "Software"), to deal
 *            in the Software without restriction, including without limitation the rights
 *            to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *            copies of the Software, and to permit persons to whom the Software is
 *            furnished to do so, subject to the following conditions:
 *    
 *            The above copyright notice and this permission notice shall be included in
 *            all copies or substantial portions of the Software.
 *    
 *            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *            IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *            FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *            AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *            LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *            OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 *            THE SOFTWARE.
 *    
 *  @changeLog_________________________________________________________________________________
 *  
 *  Nov  15th 2008
 *  JJJ - incremented version to 0.68.3
 *      - Fixed bug which occured when ol was used instead of ul.. was because you cannot use selectors such 
 *          as 'ul, ol' with getParent() and getNext() despite the mootool documentation saying "if Selectors 
 *          is included, a full CSS selector can be passed."
 *  
 *  Nov 4th 2008
 *  JJJ - incremented version to 0.68.2
 *      - Removed extranious comma which threw an error in IE. (Thanks to Robert...