Как изменить размер меню с помощью CSS - PullRequest
Новая
       31

Как изменить размер меню с помощью CSS

0 голосов
/ 01 ноября 2019

Я хочу, чтобы мое горизонтальное меню по правому краю уменьшалось до определенной степени при изменении размера браузера. Но после определенного размера он должен оставаться абсолютным или постоянным, как на этом сайте. Я новичок в CSS, поэтому не смог найти правильного решения для этого. Я не знаю, должен ли я использовать JS. Можно ли сделать это с помощью CSS?

Вот jsfiddle:

Вот что я сделал: 

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

.header1 {
  background-image: url("header_bg.jpg");
  height: 580px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 55% 45%;
}

.header2 {
  height: 580px;
  background-color: white;
}

.header3 {
  height: 580px;
  background-color: #E4EBF5;
  background-image: url("pc.jpg");
}

.header4 {
  height: 200px;
}

.header5 {
  height: 400px;
  background-image: url("köprü.jpeg");
  background-attachment: fixed;
  background-size: 100% 100%;
  opacity: 0.95;
}

.header6 {
  height: 600px;
}

.navbar1 {
  height: 88px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.imglogo {
  position: absolute;
  left: 175px;
  top: 32px;
}

a.ad {
  position: absolute;
  left: 215px;
  top: 22px;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  color: white;
  transform: perspective(0.1px) scale(1.0);
  /****** çok iyiiiiiiiiiiiiiii. smooth text effect!!! ******/
}

.çizgi {
  box-shadow: inset 0px 6px 0px #F2595B;
}

ul.menu {
  padding-left: 980px;
  height: 88px;
}

ul.menu>li {
  float: left;
  margin-left: 17px;
  position: relative;
}

ul.menu>li>a {
  display: block;
  font-size: 12.4px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  color: white;
  line-height: 88px;
}

ul.menu ul {
  width: 180px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  position: absolute;
  top: 88px;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 300ms ease-out;
  -moz-transition: opacity 300ms ease-out;
  -o-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
  visibility: hidden;
}

ul.menu ul li a {
  display: block;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  padding: 6px 20px;
}

ul.menu>li ul ul {
  top: 30px;
  width: 180px;
  height: 70px;
  left: 180px;
}

ul.menu>li:hover>ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 300ms ease-out 300ms;
  -moz-transition: opacity 300ms ease-out 300ms;
  -o-transition: opacity 300ms ease-out 300ms;
  transition: opacity 300ms ease-out 300ms;
}

ul.menu>li:hover {
  display: block;
  box-shadow: inset 0px 6px 0px #F2595B;
}

ul.menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 300ms ease-out 300ms;
  -moz-transition: opacity 300ms ease-out 300ms;
  -o-transition: opacity 300ms ease-out 300ms;
  transition: opacity 300ms ease-out 300ms;
}

.yazzı {
  position: absolute;
  font-size: 47px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-align: center;
  top: 190px;
}

.yazzı2 {
  position: relative;
  font-size: 30px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  top: 160px;
  text-align: center;
}

button {
  position: absolute;
  top: 500px;
  left: 500px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="oylesine.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">

</head>

<body>

  <div class="header1">
    <div class="navbar1">

      <ul class="menu">
        <li class="çizgi"><a href="">About us</a></li>
        <li><a href="">Our services</a>

          <ul>
            <li><a href="">News</a></li>
            <li><a href="">Events</a>

              <ul>
                <li><a href="">Set up</a></li>
                <li><a href="">Marketing</a></li>

              </ul>
            </li>

            <li><a href="">Prices</a></li>

          </ul>
        </li>

        <li><a href="">Clients</a></li>
        <li><a href="">Careers</a></li>
        <li><a href="">Contacts</a></li>
      </ul>


      <img src="logo.png" class="imglogo" alt=""> <a href="" class="ad">MailJet</a>
    </div>




    <div class="yazzı">
      <p> Meet The Mail Jet</p>
    </div>
    <div class="yazzı2">
      <p> The Best Mail Service On The Web!</p>
    </div>

    <div class="btn">
      <button type="button">Sign Up</button>
    </div>

  </div>


  <div class="header2"></div>
  <div class="header3"></div>
  <div class="header4"></div>
  <div class="header5"></div>
  <div class="header6"></div>

</body>

</html>

Что я могу сделать?

1 Ответ

0 голосов
/ 01 ноября 2019

В вашем CSS меню вы можете попробовать использовать ширину и максимальную ширину.

* 1002.

Вы также можете использовать минимальную ширину и т. Д.

...