отзывчивая панель навигации без скрипта java - PullRequest
Новая
       9

отзывчивая панель навигации без скрипта java

0 голосов
/ 25 апреля 2020

У меня действительно простая навигационная панель, которую я хотел бы сделать отзывчивой, когда в 

 @media only screen and (max-width: 768px)

Точного способа не должно быть, просто самая простая форма, которую я мог бы сделать, чтобы она реагировала без использования Java Сценарий.

У кого-нибудь есть идеи или советы? 

    <nav class="navigation">
  <p>
    <a href="#home"> Home</a> |
    <a href="#home1">home1</a> |
    <a href="#home2"> home2</a> |
    <a href="#home3"> home3</a> |
    <a href="#home4"> home4</a> |
    <a href="#home5"> home6</a>
  </p>
</nav>

.navigation {
 text-align: center;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  font-size: 16px;
  }

 a {
text-decoration:none;
color:#800080;
}

 a:hover {
 text-decoration:none;
 color:#ffffff;
 background-color:black;
}

1 Ответ

0 голосов
/ 25 апреля 2020

Вот фрагмент, который может сделать вашу работу 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
/* header */
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: sans-serif;
  background-color: #B71C1C;
}
.brand {
  width: auto;
  height: 100%;
  float: left;
  margin: 0 0 0 5%;
  color: #fff;
}
/* Navigation */
.menu {
  width: 60%;
  height: 100%;
  float: right;
}
.menu ul {
  width: 100%;
  height: inherit;
  margin: 0;
  padding: 0;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
  width: 20%;
  height: inherit;
  color: #fff;
  display: inline-block;
}
.menu ul a:hover {
  background-color: #222;
  color: #fff;
}
#menuToggle {
  display: none;
}
.menu-icon {
  display: none;
}
/* navigation < 768px*/
@media screen and (max-width: 768px) {
  .menu {
      width: 100%;
      height: auto;
  }
  .menu ul {
      display: block;
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 0.3s;
      -moz-transition: max-height 0.3s;
      -ms-transition: max-height 0.3s;
      -o-transition: max-height 0.3s;
      transition: max-height 0.3s;
  }
  .menu ul a {
      text-align: left;
      width: 100%;
      height: 50px;
      background-color: #B71C1C;
      padding: 10px 0px 10px 5%;
      border-bottom:1px solid #ddd;
  }
  .menu-icon {
      width: 100px;
      height: inherit;
      display: block;
      position: absolute;
      top: 0px;
      right: 0;
      line-height: 60px;
  }
  #menuToggle:checked ~ ul {
      max-height: 350px;
  }
  .menu-icon i {
      font-size: 1.7em;
      color:#fff;
  }
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://use.fontawesome.com/4bc5e2ae78.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Responsive Nav</title>
</head>
<body>
    <header>
        <figure class="brand">Your Logo</figure>
        <nav class="menu">
            <input type="checkbox" id="menuToggle">
            <label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
            <ul>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>About</li></a>
                <a href="#"><li>Services</li></a>
                <a href="#"><li>FAQ's</li></a>
                <a href="#"><li>Contacts</li></a>
            </ul>
        </nav>
    </header>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...