1. дома
  2. Вопрос и ответ
  3. Navigation Sub Menu

Navigation Sub Menu

2016-10-14 2 views
0

первый быстрый спасибо всем, кто помог мне ранее :)Navigation Sub Menu

Вопрос у меня сейчас моя панель навигации, когда она идет в планшетном размер, кажется, с переходом Ли влево, это также происходит с моим подменю.

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

Когда я нажимаю на подменю, кажется, что переход на цвет подменю li трудно объяснить, но вы можете увидеть его на полном носителе.

Благодарю вас заранее.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="robots" content="index,follow" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 

<body> 
<div id="MainContainer"><!--Start of MainContainer--> 

    <div id="Header"><!--Start of Header--> 

     <div><img id="Logo"src="images/logo.png"></div> 


     <nav><!--start of nav tag--> 
      <span class="nav-btn"></span> 
       <ul class="nav"> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Media</a> 
         <ul> 
          <li><a href="http://sermon.net/">Sermons</a></li> 
          <li><a href="#">Gallery</a></li> 
          <li><a href="#">Blah</a></li> 
         </ul> 

        </li> 

        <li><a href="#">Ministries</a> 
         <ul> 
          <li><a href="#">Evangelism</a></li> 
          <li><a href="#">Youth</a></li> 
          <li><a href="#">Newsletter</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Home</a></li> 
       </ul><!--End of nav class ul tag--> 
     </nav><!--End of nav tag--> 

    </div><!--End of Header--> 
    <div id="share"> 
    <!-- SMARTADDON BEGIN --> <script type="text/javascript"> (function() { var s=document.createElement('script');s.type='text/javascript';s.async = true; s.src='http://s1.smartaddon.com/share_addon.js'; var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); })(); </script> <div id="sa_share_bar"> <a id="sa_share_facebook" layout="icon" size="24"></a> <a id="sa_share_twitter" layout="icon" size="24"></a> <a id="sa_share_email" layout="icon" size="24"></a> <a id="sa_share_share" layout="icon" size="24"></a> </div> <!-- SMARTADDON END --> 

    </div> 

     <div class="firstsection"> 




<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <div class="numbertext"></div> 
    <img src="images/verse.jpg" style="width:100%"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext"></div> 
    <img src="images/run.png" style="width:100%"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext"></div> 
    <img src="images/gill.jpg" style="width:100%"> 
    <div class="text"></div> 
</div> 

</div> 
<br> 

<div style="text-align:center"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div> 

<script> 
var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1} 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    setTimeout(showSlides, 4000); // Change image every 2 seconds 
} 
</script> 


     </div> 

      <div id="WelcomeBox"> 
       <img id="WelcomeImage" src="images/welcome logo.png"/> 
      </div> 



     <div class="secondsection"> 

      <p> 
       First Words<br><br> 
       *secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
      </p> 
      </div> 




     <div id="Footer"> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     </div> 

    </div><!--End of MainContainer--> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$('span.nav-btn').click(function(){ 
    $('ul.nav').slideToggle(); 
}) 

$(window).resize(function(){ 
     if($(window).width() > 600){ 
      $('ul.nav').removeAttr('style'); 
    } 

     }) 
</script> 
</body> 
</html> 


body{ 
      width:100%; 
      height:100%; 
      background:url(images/glasgow.jpg); 
      background-position: center center; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      background-color: #999; 

} 

*{ 
    padding:0px; 
    margin:0px; 
} 

#MainContainer{ 
width:100%; 
height:auto;  
} 

#Header{ 
    width:100%; 
    height:auto; 
    position:fixed; 
    right: 0; 
    top: 0; 
    left:0; 
    z-index:2; 
} 

#share{ 
    top:102px; 
    position:fixed; 
    z-index:5; 
} 

/*Top Logo*/ 
#Logo 
{ 
    width:115px; 
    height:auto; 
    float:left; 
    margin:15px; 
    cursor:pointer; 
    position: fixed; 
    z-index:1; 
} 


/*Navigation ul*/ 
    .nav { 
    width:100%; 
    background:black; 
    line-height:100px; 
    position:fixed; 
    border-bottom: 2px red solid; 
} 

/*Navigation li*/ 
    nav .nav li{ 
    list-style-type: none; 
    float: right; 
    position:relative; 
} 

#NavBar ul:after{content:"";display:block;clear:both} 


/*Navigation a*/ 
    nav .nav li a{ 
    color:white; 
    text-decoration: none; 
    padding:20px; 
} 

/*Navigation a*/ 
    nav .nav li a:hover{ 
    color:red; 
    text-decoration: none; 
    padding:20px; 
    background:navy; 
    transition:all 0.80s; 
} 

/*Navigation li HOVER*/ 
    nav .nav li:hover{ 
    background:black; 
    transition:all 0.80s; 
} 


/*hide submenu*/ 
    nav .nav li ul { 
    width:auto; 
    display: none; 
} 

/*Show submenu at hover*/ 
    nav .nav li:hover ul { 
    width:auto; 
    display:block; 
    position:absolute; 
    top:100px; 
    background-color:black; 
    border-bottom:2px red solid; 
} 

/*Make submenu vertical*/ 
    nav .nav li ul li{ 
    width:100%; 
    display: block; 
    float:none; 
    line-height:60px; 
} 

/*Navigation sub li* xxxxxxxxxxxxxxxxxxxxxxxx yellow to navy*/ 
    nav .nav li ul li:hover{ 
     width:100%; 
    color:red; 
    text-decoration: none; 

    background:yellow; 
} 

/*Navigation axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */ 
    nav .nav li ul li a:hover{ 
     width:auto; 
    color:yellow; 
    text-decoration: none; 
    background-color:pink; 

} 

.nav-btn{display:none;} 

.firstsection{ 
    width:100%; 
    min-height:600px; 
    margin-top:100px; 
    padding-top:50px; 
    background:url(images/1.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    color: Black; 
} 

.secondsection{ 
     width:100%; 
    min-height:500px; 
    margin-top:0px; 
    padding-top:50px; 
    background:url(images/bk2.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    color: Black; 
} 

.firstsection p { 
    width:80%; 
    margin: auto; 
    display:block; 
} 

.secondsection p 
{ 
    width:80%; 
    margin: auto; 
    display:block; 
} 


#WelcomeBox { 
    width: 100%; 
    height: 300px; 
    position: relative; 
} 

#WelcomeImage { 
    max-width: 100%; 
    max-height: 200px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 


* {box-sizing:border-box} 

body {font-family: Verdana,sans-serif;} 
    .mySlides {display:none} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 100%; 
    position: relative; 
    margin: auto; 
    margin-top:50px; 
    border-top:2px black solid; 
    border-bottom:2px black solid; 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color:aqua; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

#Footer{ 
    width:100%; 
    background: rgba(255, 255, 255, 0.6); 
    color:black; 
    font-weight:bold; 
    border-top: 2px black solid; 
    text-align:center; 
} 





/* media queries*/ 


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

    .nav{ 
    text-align:left; 
    display:none; 
    } 

    .nav > li{ 
     display:block; 
    } 

    .nav-btn{ 
     display:block; 
     background-color:#333; 
     color:#FFF; 
     font-size:40px; 
     text-align:center; 
     cursor:pointer; 

    } 

    .nav-btn:before{ 
     content: "Menu"; 
    } 



} 


/*TABLET*/ 
@media (max-width: 780px){ 
/*Navigation a*/ 
    nav .nav li a{ 
    padding:10px; 
} 


} 

/*MOBILE PHONE*/ 
@media (max-width: 660px){ 
    .nav{ 
    text-align:left; 
    display:none; 
    } 

    .nav > li{ 
     display:block; 
    } 

    .nav-btn{ 
     display:block; 
     background-color:#333; 
     color:#FFF; 
     font-size:40px; 
     text-align:center; 
     cursor:pointer; 

    } 

    .nav-btn:before{ 
     content: "Menu"; 
    } 



} 

/* On smaller screens, decrease text size */ 
@media only screen and (max-width: 300px) { 
    .text {font-size: 11px} 
}

источник

2016-10-14 user2916941

+1

Вы не могли бы сделать JSFiddle вашего вопроса? –

+0

Я раньше не использовал JSFiddle, но я попробую https://jsfiddle.net/huz3yjrq/ – user2916941

ответ

0

Во-первых, это делать с прокладкой на парении, если вы установите его на «обивка: 10px;» то это не будет толкать все влево.

Во-вторых, если вы добавите «z-index: 100;» на (nav .nav li), который будет сортировать вашу проблему.

z-index - это в основном слои на странице, поэтому, установив его на 100, он будет сидеть над содержимым на зависании.

Плохой ответ, я знаю ... Мой первый ответ тоже!

Надеюсь, это поможет!

источник

2016-10-14 13:42:33

0

Причина ваши ссылки перемещаются влево на парении, потому что вы установили этот носитель запрос:

/*TABLET*/ 
@media (max-width: 780px){ 
/*Navigation a*/ 
    nav .nav li a{ 
    padding:10px; 
}

Однако вы не установили :hover для padding: 10px; так, что оно принимает padding: 20px; из предыдущего набора стиля , поэтому добавление дополнительных 10px дополнений к вашим ссылкам и их перемещение.

Добавьте к этому мультимедийному запросу:

nav .nav li a:hover { 
padding:10px; 
}

Для вашего второго вопроса, когда ваше меню сжимается в размерах, ваши подменю ссылки идет под основным меню ссылки, и вместо вашего зависания мыши над меню, его парит над основными ссылками, расположенными под ним. Добавить position: relative и z-index решить эту проблему:

/*Make submenu vertical*/ 
    nav .nav li ul li{ 
    width:100%; 
    display: block; 
    float:none; 
    line-height:60px; 
    position: relative; /*add this to make z-index work*/ 
    z-index: 10; /*give z-index so submenu goes above the main menu links*/ 
}

источник

2016-10-14 14:27:36 akcan

Смежные вопросы

 Смежные вопросы