JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

  <form method="post" action="" accept-charset="UTF-8">
    <fieldset>
      <label for="clique">Clique aqui: 
        <div class="input-prepend">
          <span class="add-on"><i class="icon-search"></i></span>
            <input class="search span2" id="inputIcon" placeholder="Clique aqui..." type="text">
          </div>
      <label>
      <div class="opcoes">
        <label>
          Lorem ipsum
            <select>
              <option>option of gmail</option>
              <option>other option of gmailb</option>
            </select>
          <button type="submit" class="btn">Submit</button>
        </label>
      </div>
    </fieldset>
  </form>

CSS

body{
  background:#fff;
  padding:20px;
}
.search{
  width:300px;
}
.opcoes{
  position:absolute;
  background:#eee;
  border:1px solid #ccc;
  padding:10px 15px;
  width:270px;
  display:none;
}
.opcoes-foco,
.opcoes-mouse{
  display:block;
}

JavaScript

var $Gmail = (function () {
    "use strict";

    var $opcoes = $('.opcoes'),
        $search = $('.search');

    return {

        search: (function(){
            $search.on({
                'focus': (function () {
                    $opcoes.addClass('opcoes-foco');
                }),
                'blur': (function () {
                    $opcoes.removeClass('opcoes-foco');
                })
            });
        }),

        opcoes: (function(){
            $opcoes.on({
                'mouseenter': (function () {
                    $opcoes.addClass('opcoes-mouse');
                }),
                'mouseleave': (function () {
                    $opcoes.removeClass('opcoes-mouse');
                })
            }).css({
                'left': $search.position().left
            });
        })
    };

}());

$Gmail.search();
$Gmail.opcoes();