Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   пауза перед .hide Jquery (https://javascript.ru/forum/jquery/16320-pauza-pered-hide-jquery.html)

рони 16.03.2017 16:00
alexscus,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
    background:#ccc;
    color:#666;
    font-size:14px;
    height:56px;
    text-transform:uppercase;
    position:relative;
  }

  nav ul{
    text-align:center;
    padding:0;
    display:flex;
    list-style:none;
    margin:0;
    line-height:56px;
  }

  nav li{
    flex:1;
  }

  nav li:hover span{
    display:block;
  }

  nav span{
    display:none;
    position:absolute;
    left:0;
    top:56px;
    width:100%;
    background:#999;
    color:#fff;
    padding:0 10px;
    box-sizing:border-box;
    text-align:left;
  }
  </style>

</head>

<body>
<nav><ul>
      <li>text<span>1 info</span></li>
      <li>text<span>2 text text</span></li>
      <li>text<span>3 text text</span></li>
      <li>text<span>4 text </span></li>
      <li>text<span>5 text text text text</span></li>
      <li>text<span>6 text text</span></li>
</ul></nav>

</body>
</html>

Dilettante_Pro 16.03.2017 17:49
рони, а тормоза?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
    background:#ccc;
    color:#666;
    font-size:14px;
    height:56px;
    text-transform:uppercase;
    position:relative;
  }

  nav ul{
    text-align:center;
    padding:0;
    display:flex;
    list-style:none;
    margin:0;
    line-height:56px;
  }

  nav li{
    flex:1;
  }

  nav li:hover span{
    opacity: 1;
  }

  nav span{
    opacity: 0;
    position:absolute;
    left:0;
    top:56px;
    width:100%;
    background:#999;
    color:#fff;
    padding:0 10px;
    box-sizing:border-box;
    text-align:left;
    transition: 2s;
  }
  </style>

</head>

<body>
<nav><ul>
      <li>text<span>1 info</span></li>
      <li>text<span>2 text text</span></li>
      <li>text<span>3 text text</span></li>
      <li>text<span>4 text </span></li>
      <li>text<span>5 text text text text</span></li>
      <li>text<span>6 text text</span></li>
</ul></nav>

</body>
</html>

рони 16.03.2017 18:05
Цитата:
Сообщение от Dilettante_Pro
рони, а тормоза?
замечательный вариант!
главное было убрать промежуток между li, из-за которого были провалы.

alexscus 20.03.2017 08:07
спасибо!


Часовой пояс GMT +3, время: 20:24.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице