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 that you have read and understand our privacy policy and code of conduct.

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