JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<!DOCTYPE html>



<html>

    <head>    

        <meta charset="utf-8" />

        

        <title></title>

        

        <!--[if lt IE 9]>

            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->    



        <!--<link rel="icon" href="favicon.ico" type="image/x-icon" />-->    



        <link rel="stylesheet" href="css/style.css" />            

    </head>



    <body>    

        <div id="selected"></div>



        <div id="sweeties" class="menu">

            <span class="menu-title">Сладости (наведи курсор)!</span>



            <ul>

                <li><a href="#cake">Торт</a></li>

                <li><a href="#donut">Пончик</a></li>

                <li><a href="#cake-small">Пирожное</a></li>

                <li><a href="#chokolate">Шоколадка</a></li>

                <li><a href="#icecream">Мороженое</a></li>

                <li><a href="#souflet">Суфле</a></li>

                <li><a href="#rahatlukum">Рахат-Лукум</a></li>

            </ul>



        </div>
      <script>
// ---------------------------------------------------------------------------------------------- WIDJET SlideMenu IMPLEMENTATION------------
function SlideMenu(options) {
    // ------------------------------------------------------------------------------------------ properties ----------    
    var self = this;
    
    var elem = options.elem,
        duration = options.duration;
    
    // ------------------------------------------------------------------------------------------ methods ------------        
    self.slideD = function(){
        elem.find('ul').slideDown(duration);
        //elem.find('ul').show();
    }
    
    self.slideU = function(){
        elem.find('ul').slideUp(duration);
        // elem.find('ul').hide();
    }
    
    // ------------------------------------------------------------------------------------------ handlers -----------        
    self.onMouseEnter = function(){
   ...

CSS

.menu {
    padding: 5px;
    width: 250px;
    border: 1px solid black;
  }
  .menu ul {
    margin: 0;
    padding-left: 20px;
    margin-left: 10px;
    display: none;

    list-style-position: outside;
  }

  .menu .menu-title {
    padding-left: 16px;
    background: url(arrow-right.png) left center no-repeat;
    font-size: 18px;
    cursor: pointer;

  }

  .menu-open .menu-title {
    background: url(arrow-down.png) left center no-repeat;
  }