Как скрыть потрясающие значки в полноэкранном режиме рабочего стола - PullRequest
0 голосов
/ 05 ноября 2018

В настоящее время я пишу отзывчивую навигационную панель, однако меня беспокоит две вещи, которые я не могу понять. Любая помощь будет оценена:

1 / С моим оригинальным изображением логотипа, которое я использовал, у меня есть навигационные ссылки, чтобы выровнять его (как своего рода экранный блок), но я заметил только линии в полноэкранном режиме, поскольку вы минимизируете экран связывает кластер ссылок внизу и затем в конечном счете исчезает, когда экран действительно маленький и появляется переключатель. Как вы можете решить эту проблему.

2 / Я не могу скрыть значки от ссылок в полноэкранном режиме, но я сделал отображение: ни один в кодировке

Мой html-код:

<!DOCTYPE html>
<html>
<head>
  <title>nav bar</title>
  <link rel="stylesheet" type="text/css" href="CSS/style.CSS">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-    awesome.min.css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="container">

  <h1 class="Logo">logo</h1>

  <nav class="site-nav">
      <ul>
    <li><a href=""><i class="fa fa-home site-nav--icon"></i>Home</a></li>
    <li><a href=""><i class="fa fa-info site-nav--icon"></i>About us</a></li>
    <li><a href=""><i class="fa fa-bus site-nav--icon"></i>blogger</a></li>
    <li><a href=""><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
      </ul>
  </nav>

  <div class="menu-toggle">
    <div class="hamburger"></div>
   </div>

</div>

</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery-    ui.min.js"></script>
 <script type="text/javascript">
   $('.menu-toggle').click(function() {

   $('.site-nav').toggleClass('site-nav--open', 500);
   $(this).toggleClass('open');

 })
 </script>
 </body>
 </html>

Мой CSS пока:

@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');

:root {
  --background: rgba(253, 254, 254, .85);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #2b58de;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
}

header{
  background: var(--background);
  text-align: left;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 92px;
}

h1{
  margin-left: 82px;
  display: inline-block;
}

.site-nav {
  position: absolute;
  top: 100%;
  left:0;
  background: #2043a9;
  height: 0px;
  overflow: hidden;
}

.site-nav--open {
   height: auto;

}

.site-nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li{
  border-bottom: 1px solid #575766;
}

.site-nav li:last-child{
  border-bottom: none;
}


.site-nav a{
  color: #b99902;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;

}

.site-nav a:hover,
.site-nav a:focus {
  background:#802CED;
  color: #000000;
}

.site-nav--icon{
  display: inline-block;
  font-size: 1.5em;
  margin-right: .75em;
  width: 1em;
  text-align:right;
  color: rgba(185,153,2,1);
}

 .menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.7em;
  right:1em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background:#000000;
  height: 3px;
  width:1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before{
  transform: translateY(-6px);
}

.hamburger::after{
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before{
opacity: 0;
}

.open .hamburger::after{
  transform: translateY(-3px) rotate(-90deg);
}

@media (min-width: 700px) {

  .menu-toggle{
    display: none;
  }

  .site-nav{
    height: auto;
    position: relative;
    background:transparent;
    float: right;
    font-size: 21px;
    padding-top: 2em;
  }

  .site-nav li {
    display: inline-block;
    border:none;

  }

  .site-nav a {
    padding: 0;
    margin-left: 5em;
    margin-right: 3.5em;
  }

  .site-nav a:hover,
  .site-nav a:focus{
    background:transparent;
  }

  .site-nav--icon {
    display: none;
  }

}

1 Ответ

0 голосов
/ 05 ноября 2018
.fa:fullscreen {
  display: none
}

... должен это сделать.
На данный момент поддержка без префикса находится на 1,99% , тогда как поддержка с префиксом должна составлять 81,71%:

.fa:-webkit-full-screen {
  display: none
}
.fa:-moz-full-screen {
  display: none
}
.fa:-ms-fullscreen {
  display: none
}
.fa:fullscreen {
  display: none
}

Однако в моем Chrome (v70.0.3538.77) он не работает.

Согласно эта статья Chrome v71 будет поддерживать его.

Спецификация здесь . Compat браузера здесь .

$('.menu-toggle').click(function() {

  $('.site-nav').toggleClass('site-nav--open', 500);
  $(this).toggleClass('open');

})
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
  --background: rgba(253, 254, 254, .85);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #2b58de;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
}

header {
  background: var(--background);
  text-align: left;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 92px;
}

h1 {
  margin-left: 82px;
  display: inline-block;
}

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  background: #2043a9;
  height: 0px;
  overflow: hidden;
}

.site-nav--open {
  height: auto;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  border-bottom: 1px solid #575766;
}

.site-nav li:last-child {
  border-bottom: none;
}

.site-nav a {
  color: #b99902;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #802CED;
  color: #000000;
}

.site-nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: .75em;
  width: 1em;
  text-align: right;
  color: rgba(185, 153, 2, 1);
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.7em;
  right: 1em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: #000000;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

@media (min-width: 700px) {
  .menu-toggle {
    display: none;
  }
  .site-nav {
    height: auto;
    position: relative;
    background: transparent;
    float: right;
    font-size: 21px;
    padding-top: 2em;
  }
  .site-nav li {
    display: inline-block;
    border: none;
  }
  .site-nav a {
    padding: 0;
    margin-left: 5em;
    margin-right: 3.5em;
  }
  .site-nav a:hover,
  .site-nav a:focus {
    background: transparent;
  }
  .site-nav--icon {
    display: none;
  }
}

.fa:-webkit-full-screen {
  display: none
}
.fa:-moz-full-screen {
  display: none
}
.fa:-ms-fullscreen {
  display: none
}
.fa:fullscreen {
  display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<header>
  <div class="container">
    <h1 class="Logo">logo</h1>
    <nav class="site-nav">
      <ul>
        <li><a href=""><i class="fa fa-home site-nav--icon"></i>Home</a></li>
        <li><a href=""><i class="fa fa-info site-nav--icon"></i>About us</a></li>
        <li><a href=""><i class="fa fa-bus site-nav--icon"></i>blogger</a></li>
        <li><a href=""><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</header>
...