Меню на Pure CSS - httpdoc.ru

Меню на Pure CSS

Меню в Pure по умолчанию вертикальное, поэтому мы сначала его увидим. Для того, чтобы использовать вертикальное меню классов , как pure-menu , pure-menu-list , pure-menu-heading и т.д. используются. Не думайте, что это сложно, просто используйте классы в правильном месте, и вы сможете быстро создать меню.

В Pure мы используем списки для создания меню, и у нас есть соответствующие классы для каждого шага. Посмотрите на синтаксис ниже, он длинный, но простой. Обратите внимание на различные классы и элементы, с которыми они используются для создания меню.

Синтаксис для создания вертикального меню

<div class="pure-menu">  
  <span class="pure-menu-heading">Brand Name</span>  
    <ul class="pure-menu-list">  
      <li class="pure-menu-item">  
        <a href="#" class="pure-menu-link">Home</a>  
      </li>  
      <li class="pure-menu-item">  
        <a href="#" class="pure-menu-link">About Us</a>  
      </li>  
      <li class="pure-menu-item">  
        <a href="#" class="pure-menu-link">Privacy Policy</a>  
      </li>  
      <li class="pure-menu-item">  
        <a href="#" class="pure-menu-link">Blog</a>  
      </li>  
  </ul>  
</div>

Посмотрите на приведенный ниже пример, в котором используется весь синтаксис, и попробуйте сами также в редакторе.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Vertical Menu </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
    <style>
      div{
      margin:10px;
      }
    </style>

<body>
<div class="pure-menu">  
  <span class="pure-menu-heading">Brand Name</span>  
  
  <ul class="pure-menu-list">  
    <li class="pure-menu-item">  
      <a href="#" class="pure-menu-link">Home</a>  
    </li>  
    <li class="pure-menu-item">  
      <a href="#" class="pure-menu-link">About Us</a>  
    </li>  
    <li class="pure-menu-item">  
      <a href="#" class="pure-menu-link">Privacy Policy</a>  
    </li>  
    <li class="pure-menu-item">  
      <a href="#" class="pure-menu-link">Blog</a>  
    </li>  
    <li class="pure-menu-item">  
      <a href="#" class="pure-menu-link">Feedback</a>  
    </li> 
  </ul>  
</div>  
</body>
</html>

Выход

Pure.CSS Vertical Menu

Горизонтальное меню Pure.CSS

Эти меню выровнены по горизонтали, как следует из названия. Чтобы создать горизонтальное меню, вам просто нужно добавить pure-menu-horizontal класс вместе с pure-menu . Это простое дополнение сделает меню выровненным по горизонтали. Посмотрите на пример ниже, чтобы заметить расположение классов, потому что ученик часто путается с местом, где находится конкретный класс.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Horizontal Menu </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
      <style>
      div{
      margin:10px;
      }
    </style>

<body>    
<div class="pure-menu pure-menu-horizontal">
 <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
  <ul class="pure-menu-list">
   <li class="pure-menu-item">
    <a href="#" class="pure-menu-link">News</a></li>
   <li class="pure-menu-item">
    <a href="#" class="pure-menu-link">Sports</a></li>
   <li class="pure-menu-item">
    <a href="#" class="pure-menu-link">Finance</a></li>
  </ul>
  </div>
<body>  	
</html>

Выход

Pure.CSS Horizontal Menu

Выбранный и отключенный пункт меню

Если вы хотите создать меню, в котором выбранный пункт меню отображается как выбранный в данный момент путем изменения некоторого свойства CSS, вы можете использовать pure-menu-selected класс, а для отключения элемента вы можете использовать этот класс pure-menu-disabled . Посмотрите на пример ниже, чтобы заметить изменения в кнопках разных классов.


Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Selected and Disabbled Menu items </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style>
      div{
      margin:10px;
      }
    </style>

<body>    
<div class="pure-menu pure-menu-horizontal">
 <ul class="pure-menu-list">
  <li class="pure-menu-item pure-menu-selected">
  <a href="#" class="pure-menu-link">Selected</a></li>
  <li class="pure-menu-item">
  <a href="#" class="pure-menu-link">Normal</a></li>
  <li class="pure-menu-item pure-menu-disabled">Disabled</li>
 </ul>
</div>
</body>
</html>

Выход

Pure.CSS Selected and Disabbled Menu items

Выпадающие меню Pure.CSS

Выпадающее меню также очень важно и широко используется. В Pure вы можете создать раскрывающееся меню, внеся небольшие изменения. Добавьте класс pure-menu-has-children в пункт меню, в котором вам нужно раскрывающееся меню, а затем создайте другой список для раскрывающегося списка.

Чтобы продолжить использование эффекта наведения на подменю, включите класс pure-menu-allow-hover .

Пример развеет все ваши сомнения. Попрактикуйтесь в редакторе, чтобы научиться говорить более свободно.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Selected and Disabbled Menu items </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
  <style>
  body{
  background:#fafafa;
  }
  div{
  margin:10px;
  }
    </style>  
<body>    
<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
     <a href="#" class="pure-menu-link">Home</a></li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
     <a href="#" id="menuLink1" class="pure-menu-link">Contacts </a>
  <ul class="pure-menu-children">
    <li class="pure-menu-item">
     <a href="#" class="pure-menu-link">Email</a></li>
    <li class="pure-menu-item">
     <a href="#" class="pure-menu-link">Twitter</a></li>
    <li class="pure-menu-item">
     <a href="#" class="pure-menu-link">Tumblr Blog</a></li>
  </ul>
    </li>
  </ul>
 </div>
</body>
</html>

Выход

Pure.CSS Selected and Disabbled Menu items