Навигация по выпадающему списку CSS, приводящая к перемещению html-контента: при добавлении абсолютной позиции отделяет вкладку - PullRequest
Новая
       11

Навигация по выпадающему списку CSS, приводящая к перемещению html-контента: при добавлении абсолютной позиции отделяет вкладку

0 голосов
/ 29 сентября 2018

Надеюсь, это не помешает мне спросить, так что мы идем ...

Проблема, с которой я столкнулся, состоит в том, что выпадающие разделы моей навигации, управляемой CSS, вызывают содержание под нимсместиться вниз.Я нашел похожие вопросы, опубликованные, но я попробовал большинство предоставленных решений, и хотя применение position: absolute; z-index: 100; останавливает смещение контента при наведении курсора на раскрывающееся меню, оно нарушает часть вкладки, вызывая смещение моей социальной кнопки.направо.Я новичок в HTML / CSS и, хотя некоторые могут не верить мне, все ниже, я написал после нескольких часов на учебные сайты, такие как FreeCodeCamp .Однако сайты, подобные этим, на самом деле не готовят вас к решению проблем, когда речь идет о необычном (по крайней мере, новичке) поведении кода, который не работает.

Ниже приведен мой код 

$("document").ready(function() {
	$(".tablink").click(function() {
    $(".tabcontent").css("display", "none");
    $(this).css("background-color", '');
    $("#" + $(this).data("target")).css("display", "block");
  });
});
html {
  background: url(https://images.pexels.com/photos/163585/redwood-national-park-california-hdr-landscape-163585.jpeg?auto=compress&cs=tinysrgb&h=350) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
  text-align: center;
  font-family: Jura;
}
.frk-page {
  background: url(https://images.pexels.com/photos/440731/pexels-photo-440731.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.fru-page {
  background: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&h=350)
  no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.about-page {
  /* Background */
  background: url(https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&h=350) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* Text Stuff */
  /*color: white; */
}
.contact-page {
  background: url(https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
}
/* Set height of body and the document to 100% to enable "full page tabs" */
  body, html {
  height: 100%;
  margin: 0;
}
/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  font-family: Jura;
  width: 19%;
  overflow: hidden;
  border-right: #FFF 2px solid;
}
.tablink:hover {
  background-color: #777;
}
.tablink:first-child {
  width: 5%;
  padding: 14px;
}
.tablink:last-child {
  border-right: 0px;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  display: none;
  padding: 100px 20px;
  height: 100%;
  white-space: normal;
  font-family: Jura;
}
tab1 { 
  padding-left: 4em;
}
.dropdown {
  -webkit-transition: height 1s; /* Safari */
  -moz-transition: height 1s;
  float: left;
  transition: height 1s;
  overflow: hidden;
  height: 45px;
  position: absolute;
  z-index: 100;
}
.dropdown:hover {
  -webkit-transition: height 1s; /* Safari */
  -moz-transition: height 1s;
  transition: height 1s;
  height: 300px;
}
.dropdown-menu {
  margin-top: 15px;
}
/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 15px;
  width: 50px;
  text-align: left;
  text-decoration: none;
}
div.tab-menu > button.tablink:first-child > i.fa {
  padding: 0px;
  justify-content: center;
  font-size: 1.33333333em;
}
/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
/*Google */
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-reddit {
  background: #ff5700;
  color: white;
}
.fa-quora {
  background: #a62100;
  color: white;
}
.fa-linkedin {
  background: #0077B5;
  color: white;
}
.fa-github {
  background: black;
  color: white;
}
i.fa {
  display: inline-block;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.faceroll-keyboard h3, .faceroll-keyboard p, .faceroll-updates h3, .faceroll-updates h4 {
  color: black;
}
div.menu-font > button {
  font-size: 14px;
}
.content {
    text-align: center;
    width: 100%;
}
.content > p {
  background-color: white;
  position: absolute;
  width: 60%;
  margin: 0 auto;
  display:block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FaceRoll Keyboard Blog</title>
    <link rel="shortcut icon" type="image/png" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMcWt-dnuAIjO_FUsLjokCe1t29RQg_dXQQsUtL-hk26AUn2Ym">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Jura">
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <h1>Welcome to my world</h1>  
    <div class="tab-menu menu-font">
	    <button class="tablink"><i class="fa fa-home fa-lg"></i></button>
	    <button class="tablink" data-target="faceroll-keyboard">FaceRoll Keyboard</button>
	    <button class="tablink" data-target="faceroll-updates">FaceRoll Updates</button>
	    <button class="tablink" data-target="about-me">About Me</button>
	    <button class="tablink" data-target="contact-me">Contact Me</button>
	    <button class="tablink dropdown">Social
      	<div class="dropdown-menu">
          <a href="https://github.com/papa0four"><i class="fa fa-github"></i></a><br />
       		<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a><br />
       		<a href="https://twitter.com/?lang=en"><i class="fa fa-twitter"></i></a><br />
      		<a href="https://plus.google.com/discover"><i class="fa fa-google"></i></a><br />
     		  <a href="https://www.reddit.com/"><i class="fa fa-reddit"></i></a><br />
          <a href="https://www.quora.com/content?content_types=answers"><i class="fa fa-quora"></i></a><br />
          <a href="https://www.linkedin.com/in/jesse-sabatini-1a0b10116/"><i class="fa fa-linkedin"></i></a>
     	  </div>
      </button>
    </div>
    <article id="faceroll-keyboard" class="tabcontent frk-page">
      <h3><strong>My Programming Journey<strong></h3>
      <h4><strong>What happens when a caveman dreams of becoming a programmer?</strong></h4>
      <p><tab1>So, the journey began roughly 10 years ago in a small recruiters office in Suburbia, California. I had thought that when you join the military, the only honor worthy job was one that saw combat, and because jumping out of perfectly good airplanes seemed silly to me, I sought the next best thing to Special Forces,....Scout. But what does this have to do with progamming, windbag?! As Daniel Tosh once said, "It's okay baby birds, I'll feed you..."</tab1></p>
      <p><tab1>Now, the day I went to sign my contract to be a scout, I had to bring along my beautiful (then 3 months pregnant) wife. You see, after my adventure at the recruiter's office, I was to take my newly wedded wife, to one of many pregnancy appointments for our first child. If we back up just a little... up until this point, my wife really had no concern or care to be apart of the process just so long as we had a means to receive medical care for our family. It was this day that my life would change <i>FOREVER</i> !</tab1></p>
    </article>
    <div id="faceroll-updates" class="tabcontent fru-page">
      <h3>FaceRoll Updates</h3>
      <h4 style="color: white">Burning my path... one broken keyboard at a time.</h4> 
    </div>
    <div id="about-me" class="tabcontent about-page">
      <h3>About Me</h3>
      <h4>Why I chose to make my life difficult.</h4>
    </div>
    <div id="contact-me" class="tabcontent contact-page" style="color: white">
      <h3>Contact Me</h3>
      <h4>Get in touch, or swing by for a cup of coffee.</h4>
    </div>
  </body>
</html>

Я понимаю, что это много на что смотреть, но так как я не совсем уверен, где я иду не так, я не знаю, чтоТем не менее, для удобства чтения я разбирал (и не выполнял) в основном CSS-файл в функциях .dropdown и .content.Наконец, я прошу прощения, если то, что я закодировал, является плохой практикой или не подходит для того, чтобы нюхать, поскольку я буквально учил себя этому, чтобы показать моему 7-летнему, насколько классным может быть классное кодирование.

В любом случае, я ценю любоеи вся помощь заранее.

...