BG Development


  Reply to this topicStart new topicStart Poll

> Проблеми с MenuBar-а
flipzzybg
Публикувано на: 11-02-2018, 22:09
Quote Post



Име: Никола
Група: Потребител
Ранг: Новопостъпил

Мнения: 3
Регистриран на: 11.02.18



Здравйте ! Като един новак в програмирването не мога да намеря грешката си в кода и се надявах някой от вас да ми помогне. Проблемът ми е че като съм сложил меню-бар, което е падащо, се крие когато стигна до section-а с slideshow-а и след това при видео-то, което съм сложил. Всякаш меню-то минава под тях, а искам да е над тях, за да е постоянно видимо. Дали някой ще може да ми помогне? Ето и кодовете:

HTML
CODE
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie-edge">
 <title> Landschaft </title>
 <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="style.css">
 <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


 <!--JavaScript-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <script type="text/javascript">
       $(window).on('scroll', function() {
 if ($(window).scrollTop()) {
   $('nav').addClass('black');
 } else {
   $('nav').removeClass('black');
 }
});

function toggleMenu(x) {
 x.classList.toggle('openMenu');
}
      </script>
</head>



<!--Body-->
<body>
 <div class="wrapper">
 <nav>
   <div class="hamburger" onclick="toggleMenu(this.parentNode);">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
   </div>
   <div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
     ><a href="about.html">СЪБИТИЯ</a
     ><a href="index.html">ПЪТЕКИ</a
     ><a href="index.html">ФОРУМ</a
     ><a href="index.html">ВРЪЗКИ</a
     ><a class="active" href="index.html">ВХОД</a>
 </nav>
</div>
</body>


 <!--Section - Slideshow-->
 <section class="sec1"></section>
 <section class="content">
       <div class="slider">
             <figure>
       <div class="slide">
             <img src="img/slideshow1.jpg">
       </div>
       <div class="slide">
             <img src="img/slideshow2.jpg">
       </div>
       <div class="slide">
             <img src="img/slideshow3.jpg">
       </div>
               <div class="slide">
             <img src="img/slideshow4.jpg">
       </div>
               <div class="slide">
             <img src="img/slideshow5.jpg">
       </div>
 </figure>
 </div>
 </section>


 <!--Section Welcome Video-->
 <section class="Welcome">
   <article id="video">
   <video width="295" height="238" controls autopl>
     <source src="video.mp4" type="video/mp4">
       </video>
   </article>
     <aside id="welcometext">
       <h2><center>Welcome</center></h2>
       <center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
     </aside>
   </section>

   <!--Section News-->

    <section class="News">
     <article id="News1">
       <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
       <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
       <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
     </article>
     <aside id="New">
       <p> dsadas das </p>
     </aside>
   </section>




 </div>
</body>
</html>



CSS
CODE
* {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}

body {
 font: 15px/1.5 Arial, Helvetica, sans-serif;
 box-sizing: border-box;
}


/*Menu Bar*/

nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 80px;
 padding: 0 100px;
 transition: all 300ms;
}

nav.black {
 background: rgba(0, 0, 0, 0.8);
}

nav .logo {
 display: inline-block;
 width: 25%;
 padding: 0 5px;
 line-height: 80px;
 font-size: 24px;
 transition: all 0.3s;
 text-align: center;
}

nav.black .logo {
 color: #fff;
}

nav a {
 display: inline-block;
 width: 12.5%;
 line-height: 80px;
 color: #151515;
 padding: 0 5px;
 text-decoration: none;
 text-transform: uppercase;
 transition: .3s;
 text-align: center;
 vertical-align: top;
}

nav.black a {
 color: #fefefe;
}

nav a:focus {
 outline: none;
}

nav a.active {
 background: #E2472F;
 color: #fff;
 border-radius: 6px;
}


section.sec1 {
 width: 100%;
 height: 100vh;
 background: url(img/lol.jpg);
 background-size: cover;
 background-position: center;
}



/* Hamburger icon */

.hamburger {
 display: none;
 cursor: pointer;
}

.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
 width: 35px;
 height: 5px;
 background-color: #fefefe;
 margin: 6px 0;
 transition: all 0.4s;
}

.openMenu .hamburger .bar1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px);
 transform: rotate(-45deg) translate(-9px, 6px);
}

.openMenu .hamburger .bar2 {
 opacity: 0;
}

.openMenu .hamburger .bar3 {
 -webkit-transform: rotate(45deg) translate(-8px, -8px);
 transform: rotate(45deg) translate(-8px, -8px);
}


/*Media*/

@media(max-width: 860px) {
 nav {
   background: rgba(0, 0, 0, 0.8);
   padding: 0 20px;
   color: #fefefe;
   overflow: hidden;
 }
 .logo {
   position: fixed;
   top: 0;
 }
 nav a {
   width: 100%;
   line-height: calc((100vh - 80px) / 6);
   transform: translateY(80px);
   visibility: hidden;
 }
 .openMenu a {
   color: #fefefe;
   visibility: visible;
 }
 .hamburger {
   display: inline-block;
   position: absolute;
   right: 20px;
   top: 20px;
 }
 .openMenu {
   height: 100vh;
 }

 .slider {
   width: 100%;
   height: 23%;
 }
 section.sec1 {
   width: 100%;
   height: 30%;
 }
 article#video{
   width: 100%;
 }
 video{
   width: 100%;
 }
 aside{
  border-bottom:#e8491d 3px solid;
  width: 100%;
  height: 250px;
}
aside#welcometext{
 font-family: cursive;
 width: 100%;
 height: 76%;
}
aside#New{
 font-family: serif;
 height: 100%;
 width: 100%;
}
}


/*Slideshow*/
*{
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 }

.slider {
 overflow: hidden;
 height: 450px%;
}

.slider figure div{
 width: 20%;
 float: left;
}

.slider figure img{
 width: 100%;
 float: left;
}

.slider figure{
 position: relative;
 width: 500%;
 margin: 0;
 left: 0;
 animation: 25s slidy infinite;
}

@keyframes slidy{
  0% {
     left: 0%;
  }
  10% {
     left: 0%;
  }
  12% {
     left: -100%;
  }
  22% {
     left: -100%;
   }
  24% {
     left: -200%;
  }
  34% {
     left: -200%;
  }
  36% {
     left: -300%;
  }
  46% {
     left: -300%;
  }
  48% {
     left: -400%;
  }
  58% {
     left: -400%;
  }
  60% {
     left: -300%;
  }
  70% {
     left: -300%;
  }
  72% {
     left: -200%;
  }
  82% {
     left: -200%;
  }
  84% {
     left: -100%;
  }
  94% {
     left: -100%;
  }
  96% {
     left: 0%;
  }
}

/*Welcome*/

article{
 float: left;
 margin: 0 auto;
 width: 23%;
 height: auto;
}

#welcometext{
 float: right:
 margin: 0 auto;
 width: 100%;
 height: auto;
 border-bottom:#e8491d 3px solid;
 height: 38%;
}

#News1{
 margin-left: 5%;
 width: 52%;
 height: 7%;
 display: inline-flex;
}

section.News{
 border-bottom:#e8491d 3px solid;
 height: 100%;
}

aside#New{
 padding: 27%;
 height: 100%;
 width: 100%;
 font-family: cursive;

}
PMEmail Poster
Top
samominavam
Публикувано на: 11-02-2018, 23:34
Quote Post



Име:
Група: Потребител
Ранг: Активен

Мнения: 203
Регистриран на: 22.08.17



PMEmail Poster
Top
hristonev
Публикувано на: 12-02-2018, 08:48
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 399
Регистриран на: 19.09.17



Ако искаш го качи някъде да е видимо. Че мързела да четеш толкова реда е голям.
PMEmail Poster
Top
0 потребители преглеждат тази тема в момента (0 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2018 | BG Development | All Rights Reserved
RSS 2.0