CSS & SASS 导航问题答案

【问题标题】：CSS & SASS Nav IssueCSS & SASS 导航问题
【发布时间】：2018-08-04 11:46:10
【问题描述】：

我一直在 HTML 中使用 Sass 和 CSS 为我正在尝试创建的网站创建导航栏，但仅显示导航栏的第一项并且它与左侧对齐。我对编码相当陌生，所以它可能是非常基本的东西，但我正在尝试找到一种方法来拥有一个响应式工作导航栏。我的 HTML 中有 JavaScript，因为我使用 Github.io 来实现我的网站。我还通过 ruby 将我的 sass 转换为 css。有没有人知道我做错了什么？

As you can see in the picture, only the about me side is showing in the Navigation bar. the rest of the bar is missing

再次提前感谢大家的帮助。这个网站对学习更多关于编码的知识有很大帮助，再次感谢您。

这是 HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <meta name="author" content="Clark Fennell">
    <meta name="description" content="Clark Fennell's Website">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/stylesass.css">
    <link rel="stylesheet" type="text/css" href="/css/.sass-cash/f438d035db857854fbdbe4096cf1f690c6912d06/style.sassc">
    <link rel="stylesheet" href="https://maxcdn.bottstrapcdn.com/bottstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]><link rel="stylesheet" href="ie.css"><![endif]-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bottstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script type="text/JavaScript" src="/JS/mywebjscript.js">
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<Title>Clark Fennell's Website</title>
</head>
<header>
<div class="title">
        <p class="heading">CLARK FENNELL</p>
        <p class="heading2">WEBSITE</p>
        <script type="text/javascript">
          $(function () {
            count = 0;
            wordsArray = ["UX/UI DESIGNER", "FRONT-END DEVELOPER", "WEB DESIGNER", "SOFTWARE DEVELOPER"];
            setInterval(function () {
              count++;
              $("#word").fadeOut(400, function () {
                $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400).addClass("small-heading");
              });
            }, 2000);
          });
        </script>
    <div id="word" class="small-heading">UX/UI DESIGNER</div>
</div>
</div>
<br>
<div>
<script type="text/javascript">
$(document).ready( function() {
  $('#content-reveal').hide();
  $('#aboutme').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>ABOUT ME</h2><br><p>Age: 29<br>Location: Leeds<br><br>I am a developer specialising in HTML, CSS, JAVA, JaveScript, SQL, Command Line, Ruby and many more.<br><br>I am also well equpit at using Adobe programs, such as, PhotoShop, Dreamweaver, Illistrator, InDesign, and other software as well.<br><br>I like to board and video games, watching indepentdant professional wrestling & a nice cup of tea.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myhtmlcss').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>HTML & CSS</h2><br><p>This site is just one example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myjscript').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>JAVASCRIPT</h2><br><p>Below is a a Random Colour Generator created with JavaScript code. The code for this is located on my <a href="Https://github.com/clarkfennell/Random-Color-Generator-React-JS-Example">GITHUB</a></p><p>For more JavaScript, JQuery and AngularJS, please visit my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>MY CV</h2><br><img src="/images/NEWCVClarkFennell.jpg"></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>CONTACT</h2></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
} );
</script>
<ul class="PrimaryNav with-indicator">
  <li class="Nav-item" id="aboutme">ABOUT ME</li>
  <li class="Nav-item" id="myhtmlcss">HTML & CSS</li>
  <li class="Nav-item is-active" id="myjscript">JAVASCRIPT</li>
  <li class="Nav-item" id="mycv">MY CV</li>
  <li class="Nav-item" id="contactme">CONTACT</li>
</ul>
</div>
</header>
</body>

这是 SASS：

$menu-items: 5
$width: (100/$menu-items) * 1%

$background-color: #121212
$indicator-color: #363151

.PrimaryNav
  list-style: none
  margin: 50px auto
  max-width: 720px
  padding: 0
  width: 100%


.Nav-item
  background: #363151
  display: block
  float: left
  margin: 0
  padding: 0
  text-align: center
  width: $width


  &:first-child
    border-radius: 3px 0 0 3px


  &:last-child
    border-radius: 0 3px 3px 0


  &.is-active a
    color: $indicator-color


  a
    color: $background-color
    display: block
    padding-top: 20px
    padding-bottom: 20px
    text-decoration: none

    &:hover
      color: $indicator-color



.with-indicator
  position: relative

.Nav-item:last-child
  &:before, &:after
    content: ''
    display: block
    position: absolute


  &:before
    width: 0
    height: 0
    border: 6px solid transparent
    border-top-color: $color-indicator
    top: 0
    left: 12.5%
    margin-left: -3px


  &:after
    width: $width
    background: $indicator-color
    top: -6px
    bottom: -6px
    left: 0
    z-index: -1



$menu-items: 5
$menu-items-loop-offset: $menu-items - 1
$width: (100/$menu-items) * 1%

.with-indicator
  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after
      left:($width*$i)-$width
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width



  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after
      left:($width*$i)-$width !important
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width !important


.Nav-item
    &:last-child
      &:hover, &.is-active
        &:before
          left: (100%-$width)+($width/2) !important
        &:after
          left: 100%-$width !important

这是 CSS：

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
@font-face {
    font-family: "Etna";
    src:url("/Fonts/enta.eot");
    src:url("/Fonts/enta.otf") format("opentype"),
            url("/Fonts/etna.woff") format("woff"),
            url("/Fonts/etna.svg") format("svg"),
            url("/Fonts/etna.ttf") format("ttf");
}

@import url('https//fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Titllium+Web');

html, body {
    background-color: #EEEAE3;
    font-family: 'Titllium Web', sans-serif;
}

h2 {
        font-size: 1.15em;
        color: #24282B;
        font-family: 'Etna', Helvetica, sans-serif;
        text-align: left;
}

p {
    font-size: 1em;
    color: #24282B;
    text-align: left;
    font-family: 'Titllium Web', sans-serif;
}

.heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 3.50em;
}

.heading2 {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.70em;
}

.small-heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.15em;
}

.copywrite {
    font-size: 0.6em;
    opacity: 0.25:
}

#wrapper {
    width: 450px;
    height: 281px;
    margin: 0 auto 10px;
    align-items: center;
}

#aboutme {background-color: #EEEAE3;}
#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

再次感谢

【问题讨论】：

您的期望是什么？你有图片或更多文字来描述它吗？
是的，我正在尝试制作一个动态导航栏，它使用 JavaScript/jQuery 将不同的 div 淡入淡出。我已经设法让 div 与 jQuery 一起工作，但导航只显示它的第一部分（仅“关于我”导航按钮）。

标签： html css sass navigation nav

【解决方案1】：

你用 Css 隐藏了其他导航项

#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

如果你想展示它们，你可以替换为

#myhtmlcss {background-color: #EEEAE3;}
#myjscript {background-color: #EEEAE3;}
#mycv {background-color: #EEEAE3;}
#contactme {background-color: #EEEAE3;}

【讨论】：