html - CSS & SASS 导航问题

标签 html css sass navigation nav

我一直在 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;}

再次感谢

最佳答案

您通过 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;}

关于html - CSS & SASS 导航问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51685267/

上一篇：html - 将 SVG 元素与页面左侧对齐

下一篇：javascript - 修复过度滚动时的 header 背景

相关文章：

css - 如何在 scss 中编写此运算符？

php - 从不同的 html 页面插入一个数据库行

html - 步骤进度条 - 进度编号框之间的线

javascript - 为其他幻灯片保留初始动画

html - Ng bootstrap 下拉菜单不在前面

css - 使用 SASS 和 OOCSS 引用

asp.net - 我可以在我的 html 文件中放置什么元标记，以便它自动在 Microsoft Word 中打开该页面？

html - 移动固定/粘性菜单 CSS

javascript - 如何使用 CSS/JavaScript 对 Angular 线组合两个图像？

html - 如何让悬停在一个类上触发其他类的变化？

©2024 IT工具网  联系我们