0

@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria-bold.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
body {
    font-family: Geometria, serif;
    margin: 0;
    padding: 0;
}
header {
    background: url(../img/bg1.jpg) no-repeat center top/cover;

}

.menu2{
border: solid 2px #2A94E2;
    height: 500px;
    width: 250px;
    position: absolute;
    bottom: 260px;
    background: #eef3fa;
    display: none;
    border-radius: 5px;
}

.btn-menu {
font-size: 24px;    
    line-height: 4;
    text-decoration: none;
}
.menu2 li{
    list-style-type: none;
}

.cont {
    width: 930px;
    margin: 0 auto;
}
.menu {
    margin-top: 71px;
    float: left;
}
.menu1 {
    margin-left: 30px;
    margin-top: 80px;
    float: left;
}
.menu:hover {
    background: #DBDAD9;
}
.logo {

    float: left;
    margin-left: 170px;
    margin-top: 30px;
    height: 91px
}
.be {
    float: left;
    margin-top: 57px;
    margin-left: 13px;
}
header p {
    float: left;
    margin-top: 58px;
    margin-left: 30px;
    font-family: Geometria, serif;
    font-size: 16px;
    line-height: 26px;
}
.phone {
    float:right;
    font-size: 25px;
    margin-left: 20px;
    
}
.call {
    float: right;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 55px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;

}
button:hover {
    background: #2A94E2;

}
.head h1 {
    
width: 580px;
font-size: 40px;
line-height: 55px;
font-family: geometria-bold;
text-transform: uppercase;
color: #000000;
padding-top: 30px;
margin-top: 0px;
}
.head {
    width: 900px;
    display: flex;
    flex-wrap: wrap;
}
    <title>BLITZ ESTATE</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <header>
         <div class="cont">
            <div>
                <img src="img/iconmenu.png" alt="" class="menu">
            <p class="menu1 menu">Меню</p>
            <img src="img/logofull.png" alt="Blitz Estate" class="logo">
            <img src="img/be.png" alt="" class="be">
        <div class="menu2">
          <ul>
              <li> <a class="btn-menu row" href="#">link1</a></li>
              <li> <a class="btn-menu row" href="#">link1</a></li>
              <li> <a class="btn-menu row" href="#">link1</a></li>
              <li> <a class="btn-menu row" href="#">link1</a></li>
              <li> <a class="btn-menu row" href="#">link1</a></li>
          </ul>
        </div>

сделал выпадающее меню но оно выходит снизу а нужно что бы выдвигалось сверху. как это сделать? и от чего зависит направление анимации?

$(document).ready(()=>{

$('.menu').on('click',()=>{
  $('.menu2').slideToggle(200,"linear");
})
})
0

1 ответ 1

1

Если со всей ответственностью подойти к решению вашей задачи, то по хорошему было бы полностью пересмотреть весь ваш и html и css код, потому что ошибок в нем столько, что проще заново всё переписать. Однако делать этого я не буду, так как не знаю, что в итоге у вас должно получится, какой должна быть страница в конечном виде. Поэтому только решаем ту задачу, которая поставлена в вопросе. Смотрите, ожидали это?

$(document).ready(() => {
  $('.menu').on('click', () => {
    $('.menu2').slideToggle(200, "linear");
  })
})
body {
  font-family: Geometria, serif;
  margin: 0;
  padding: 0;
}

header {
  background: url(../img/bg1.jpg) no-repeat center top/cover;
}

.menu2 {
  border: solid 2px #2A94E2;
  height: 500px;
  width: 250px;
  position: absolute;
  /*bottom: 260px;*/
  top: 80px;
  background: #eef3fa;
  display: none;
  border-radius: 5px;
}

.btn-menu {
  font-size: 24px;
  line-height: 4;
  text-decoration: none;
}

.menu2 li {
  list-style-type: none;
}

.cont {
  max-width: 930px;
  margin: 0 auto;
}

.menu {
  margin-top: 71px;
  float: left;
}

.menu1 {
  margin-left: 30px;
  margin-top: 80px;
  float: left;
}

.menu:hover {
  background: #DBDAD9;
}

.logo {
  float: left;
  margin-left: 170px;
  margin-top: 30px;
  height: 91px
}

.be {
  float: left;
  margin-top: 57px;
  margin-left: 13px;
}

header p {
  float: left;
  margin-top: 58px;
  margin-left: 30px;
  font-family: Geometria, serif;
  font-size: 16px;
  line-height: 26px;
}

.phone {
  float: right;
  font-size: 25px;
  margin-left: 20px;
}

.call {
  float: right;
  background: #EEF3FA;
  font-family: Geomeria, serif;
  padding: 16px 55px;
  border: 1px solid #2A94E2;
  box-sizing: border-box;
  border-radius: 5px;
}

button:hover {
  background: #2A94E2;
}

.head h1 {
  width: 580px;
  font-size: 40px;
  line-height: 55px;
  font-family: geometria-bold;
  text-transform: uppercase;
  color: #000000;
  padding-top: 30px;
  margin-top: 0px;
}

.head {
  width: 900px;
  display: flex;
  flex-wrap: wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="cont">
    <div>
      <img src="img/iconmenu.png" alt="" class="menu">
      <p class="menu1 menu">Меню</p>
      <img src="img/logofull.png" alt="Blitz Estate" class="logo">
      <img src="img/be.png" alt="" class="be">
    </div>
    <div class="menu2">
      <ul>
        <li> <a class="btn-menu row" href="#">link1</a></li>
        <li> <a class="btn-menu row" href="#">link1</a></li>
        <li> <a class="btn-menu row" href="#">link1</a></li>
        <li> <a class="btn-menu row" href="#">link1</a></li>
        <li> <a class="btn-menu row" href="#">link1</a></li>
      </ul>
    </div>

</header>

2
  • Спасибо за ответ. А можно узнать какие у меня ошибки и где? что бы знать над чем стоит поработать! lincoln01.beget.tech вот полный сайт. Глянете если не трудно профессиональным взглядом!?
    – Юрий
    9 мар 2021 в 18:28
  • да спасибо большое
    – Юрий
    9 мар 2021 в 18:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.