Проблемы с CSS и SASS Nav

Я использовал Sass и CSS в HTML, чтобы создать панель навигации для веб-сайта, который я пытаюсь создать, но отображается только первый элемент панели навигации, который выровнен по левому краю. Я новичок в программировании, так что это может быть что-то очень простое, но я пытаюсь найти способ иметь отзывчивую рабочую панель навигации. В моем HTML есть JavaScript, поскольку я использую Github.io для реализации своего сайта. Я также преобразовал свой sass в css через Ruby. Есть ли у кого-нибудь идеи, что я сделал не так?

Как вы можете видеть на картинке, на панели навигации отображается только сторона «Обо мне». остальная часть бара отсутствует

Еще раз спасибо за помощь всем заранее. Этот сайт очень помог узнать больше о кодировании, поэтому еще раз благодарим вас заранее.

Вот 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;}

Еще раз спасибо

что ты ожидал? у вас есть изображение или больше текста для его описания?

— 04.08.2018 14:16

да, я пытаюсь создать динамическую панель навигации, которая использует JavaScript / jQuery для постепенного появления и исчезновения различных div друг над другом. Мне удалось заставить div работать с jQuery, но навигация показывает только первую часть (только кнопка навигации «обо мне»).

— 04.08.2018 14:18

html css sass navigation nav

04.08.2018 13:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

196

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;}

04.08.2018 14:28

Другие вопросы по теме

Родительский стиль удален при использовании стилизованного компонента

Как я могу сделать этот сайт адаптивным?

Изменить цвет заливки контейнера для кнопки MDC

Автоматическая высота флип-карты?

Решение для полного отображения всплывающей подсказки на прокручиваемой строке меню

Изменение дочернего последнего компонента и атрибута css в ReactJs

Как я могу удалить это пространство?

Как исправить Lighthouse "Ссылки не имеют различимого названия"

Как выполнить CSS и JS для определенного элемента или функции в WordPress

Абсолютное положение изображения css поверх адаптивного изображения

Проблемы с CSS и SASS Nav

Ответы 1

Другие вопросы по теме

Похожие вопросы