Подменю навигации

ProgramBox

Подменю навигации

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

сначала короткая благодарность всем, кто помог мне ранее 🙂

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

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

Когда я нажимаю на подменю, кажется, что в цвете подменю 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}
}

Ответ №1:

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

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

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

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

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

Ответ №2:

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

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

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

Добавьте это в свой медиа-запрос:

 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*/
}

Метки: Подменю навигации

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Преобразование Python Groupby и aggregate в Postgres SQL

Фоновое изображение не настраивается на планшете (вид в альбомной ориентации)

Интерактивное средство просмотра внутри просмотра страницы