hide a Featurediscovery boot when going to mobile and display any node for desktop

Asked

Viewed 34 times

1

I’m using materialize, and a feature called Featurediscovery, I edited the materialize to make my Nav bar appear when clicked but, I would like it to disappear when it enters a mobile screen, and appear only the menu navbar for mobile, follows the code of my menu 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.tap-target');
  var instances = M.TapTarget.init(elems);
});


$('.dropdown-trigger').dropdown();

$(document).ready(function() {
  $('.sidenav').sidenav();
});
/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */

html {
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
}

@media only screen and (min-width: 0) {
  html {
font-size: 14px;
  }
}

@media only screen and (min-width: 992px) {
  html {
font-size: 14.5px;
  }
}

@media only screen and (min-width: 1200px) {
  html {
font-size: 15px;
  }
}
.tap-target-wrapper {
  width: 197%;
  height: 400px;
  position: fixed;
  z-index: 1000;
  visibility: hidden;
  -webkit-transition: visibility 0s .0s;
  transition: visibility 0s .0s;
}

.tap-target-wrapper.open {
  visibility: visible;
  -webkit-transition: visibility 0s;
  transition: visibility 0s;
}

.tap-target-wrapper.open .tap-target {
  -webkit-transform: scale(1);
      transform: scale(1);
  opacity: .95;
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.tap-target-wrapper.open .tap-target-wave::before {
  -webkit-transform: scale(1);
      transform: scale(1);
}

.tap-target-wrapper.open .tap-target-wave::after {
  visibility: visible;
  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
      animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  -webkit-transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
}

/*deixa eedondo*/
/*.tap-target {
  position: absolute;
  font-size: 1rem;
  border-radius: 50%;
  background-color: #ee6e73;
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
      box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(0);
      transform: scale(0);
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}*/

.tap-target-content {
  position: relative;
  display: table-cell;
}

.tap-target-wave {
  position: absolute;
  border-radius: 50%;
  z-index: 10001;
}

.tap-target-wave::before, .tap-target-wave::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
}

.tap-target-wave::before {
  -webkit-transform: scale(0);
      transform: scale(0);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.tap-target-wave::after {
  visibility: hidden;
  -webkit-transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
  transition: opacity .3s,
 visibility 0s,
 -webkit-transform .3s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s,
 -webkit-transform .3s;
  z-index: -1;
}

.tap-target-origin {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  z-index: 10002;
  position: absolute !important;
}

.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), .tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover {
  background: none;
}

@media only screen and (max-width: 600px) {
  .tap-target, .tap-target-wrapper {
width: 600px;
height: 600px;
  }
}

/* 2dp elevation modified*/
.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.sidenav span.badge {
  margin-top: calc(24px - 11px);
}

nav {
  color: #fff;
  background-color: #ee6e73;
  width: 100%;
  height: 56px;
  line-height: 56px;
}

nav.nav-extended {
  height: auto;
}

nav.nav-extended .nav-wrapper {
  min-height: 56px;
  height: auto;
}

nav.nav-extended .nav-content {
  position: relative;
  line-height: normal;
}

nav a {
  color: #fff;
}

nav i,
nav [class^="mdi-"], nav [class*="mdi-"],
nav i.material-icons {
  display: block;
  font-size: 24px;
  height: 56px;
  line-height: 56px;
}

nav .nav-wrapper {
  position: relative;
  height: 100%;
}

@media only screen and (min-width: 993px) {
  nav a.sidenav-trigger {
display: none;
  }
}

nav .sidenav-trigger {
  float: left;
  position: relative;
  z-index: 1;
  height: 56px;
  margin: 0 18px;
}

nav .sidenav-trigger i {
  height: 56px;
  line-height: 56px;
}

nav .brand-logo {
  position: absolute;
  color: #fff;
  display: inline-block;
  font-size: 2.1rem;
  padding: 0;
}

nav .brand-logo.center {
  left: 50%;
  -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
}

@media only screen and (max-width: 992px) {
  nav .brand-logo {
left: 50%;
-webkit-transform: translateX(-50%);
        transform: translateX(-50%);
  }
  nav .brand-logo.left, nav .brand-logo.right {
padding: 0;
-webkit-transform: none;
        transform: none;
  }
  nav .brand-logo.left {
left: 0.5rem;
  }
  nav .brand-logo.right {
right: 0.5rem;
left: auto;
  }
}

nav .brand-logo.right {
  right: 0.5rem;
  padding: 0;
}

nav .brand-logo i,
nav .brand-logo [class^="mdi-"], nav .brand-logo [class*="mdi-"],
nav .brand-logo i.material-icons {
  float: left;
  margin-right: 15px;
}

nav .nav-title {
  display: inline-block;
  font-size: 32px;
  padding: 28px 0;
}

nav ul {
  margin: 0;
}

nav ul li {
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  float: left;
  padding: 0;
}

nav ul li.active {
  background-color: rgba(0, 0, 0, 0.1);
}

nav ul a {
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  font-size: 1rem;
  color: #fff;
  display: block;
  padding: 0 15px;
  cursor: pointer;
}

nav ul a.btn, nav ul a.btn-large, nav ul a.btn-small, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating {
  margin-top: -2px;
  margin-left: 15px;
  margin-right: 15px;
}

nav ul a.btn > .material-icons, nav ul a.btn-large > .material-icons, nav ul a.btn-small > .material-icons, nav ul a.btn-large > .material-icons, nav ul a.btn-flat > .material-icons, nav ul a.btn-floating > .material-icons {
  height: inherit;
  line-height: inherit;
}

nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

nav ul.left {
  float: left;
}

nav form {
  height: 100%;
}

nav .input-field {
  margin: 0;
  height: 100%;
}

nav .input-field input {
  height: 100%;
  font-size: 1.2rem;
  border: none;
  padding-left: 2rem;
}

nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
  border: none;
  -webkit-box-shadow: none;
      box-shadow: none;
}

nav .input-field label {
  top: 0;
  left: 0;
}

nav .input-field label i {
  color: rgba(255, 255, 255, 0.7);
  -webkit-transition: color .3s;
  transition: color .3s;
}

nav .input-field label.active i {
  color: #fff;
}

.navbar-fixed {
  position: relative;
  height: 56px;
  z-index: 997;
}

.navbar-fixed nav {
  position: fixed;
}

@media only screen and (min-width: 601px) {
  nav.nav-extended .nav-wrapper {
min-height: 64px;
  }
  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
height: 64px;
line-height: 64px;
  }
  .navbar-fixed {
height: 64px;
  }
}

.sidenav .collapsible,
.sidenav.fixed .collapsible {
  border: none;
  -webkit-box-shadow: none;
      box-shadow: none;
}

.sidenav .collapsible li,
.sidenav.fixed .collapsible li {
  padding: 0;
}

.sidenav .collapsible-header,
.sidenav.fixed .collapsible-header {
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: inherit;
  padding: 0 16px;
}

.sidenav .collapsible-header:hover,
.sidenav.fixed .collapsible-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidenav .collapsible-header i,
.sidenav.fixed .collapsible-header i {
  line-height: inherit;
}

.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body {
  border: 0;
  background-color: #fff;
}

.sidenav .collapsible-body li a,
.sidenav.fixed .collapsible-body li a {
  padding: 0 23.5px 0 31px;
}

ul:not(.browser-default) {
  padding-left: 0;
  list-style-type: none;
}

ul:not(.browser-default) > li {
  list-style-type: none;
}

.sidenav span.badge {
  margin-top: calc(24px - 11px);
}

@media only screen and (max-width: 600px) {
  .hide-on-small-only, .hide-on-small-and-down {
display: none !important;
  }
}

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down {
display: none !important;
  }
}

@media only screen and (min-width: 601px) {
  .hide-on-med-and-up {
display: none !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .hide-on-med-only {
display: none !important;
  }
}

@media only screen and (min-width: 993px) {
  .hide-on-large-only {
display: none !important;
  }
}

@media only screen and (min-width: 1201px) {
  .hide-on-extra-large-only {
display: none !important;
  }
}

@media only screen and (min-width: 1201px) {
  .show-on-extra-large {
display: block !important;
  }
}

nav.nav-extended .nav-wrapper {
  min-height: 56px;
  height: auto;
}

nav .nav-wrapper {
  position: relative;
  height: 100%;
}

menu {
  display: block;
}

ul.staggered-list li {
  opacity: 0;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Element Showed -->
<a id="menu" class="waves-effect waves-light btn btn-floating" onclick="$('.tap-target').tapTarget('open')"><i class="material-icons">menu</i></a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">

  <!-- Dropdown Structure -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>

  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>

      <ul class="right hide-on-med-and-down">
        <li><a href="#!">Sass</a></li>
        <li><a href="#!">Components</a></li>
        <li><a href="#!">Javascript</a></li>
        <li><a href="#!">Mobile</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
  </nav>
</div>

<ul class="sidenav" id="mobile-demo">
  <li><a href="#!">Sass</a></li>
  <li><a href="#!">Components</a></li>
  <li><a href="#!">Javascript</a></li>
  <li><a href="#!">Mobile</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

It’s kind of messed up because I tried to put a part of the css code of materialize. for desktop works, my menu appears normal, so when goes to smaller screen, when use inspect, if I click does nothing, good in green it displays something white, but can not see, I think, but I would like it to disappear and stay only the menu of navbar

php javascript css html5

  • Because you don’t use yours @media to give``display:None/block` in this menu?

  • na max 600? in this case here @media only screen and (min-width: 601px) { . Hide-on-med-and-up { display: None ! Important; } } but I must specify which button to block in case it calls my div via onclick="$('. tap-target'). tapTarget('open')"

1 answer

2


Friend... I haven’t looked at your code much but I understand your problem. I’ll show you an example of what to do to remove something for desktop or mobile:

HTML:

<div class="div-mobile">
    <p>Esta div irá sumir no desktop e aparecerá no mobile.</p>
</div>

<div class="div-desktop">
    <p>Esta div irá sumir no moboile e aparecerá no desktop.</p>
</div>

CSS:

@media (max-width: 500px){
    /* Esta div irá sumir quando estiver em telas menores a 500px (celulares) */
    .div-mobile{
        display: none;
    }
}

@media (min-width: 501px){
    /* Esta div irá sumir quando estiver em telas maiores a 501px (desktops) */
    .div-desktop{
        display: none;
    }
}

  • Thank you very much, I didn’t think that way, it’s simpler than I thought, it works very well

  • I must edit and put as solved?

  • where can I find the right size for all types of devices? because that’s in relation to the right resolution?

  • there are several websites that you can search for various types of resolutions.

  • an example: http://www.robsonmoulin.com.br/artigos/mobile/resolucao-de-tela-de-smartphones-e-tablets/

  • @Joannes if your problem has been solved mark the answer as solved.

  • where I see the option to mark as solved?

  • below the voting arrows up and down

Show 3 more comments

Browser other questions tagged php javascript css html5

You are not signed in. Login or sign up in order to post.