Sujet Précédent Sujet Suivant

MENU DE MON SITE WEB A ADAPTER RESPONSIVE DEVICES

Fermé
Utilisateur anonyme - 13 nov. 2019 à 20:17
 Utilisateur anonyme - 14 nov. 2019 à 15:06
Bonjour! J'ai un site web dont le menu n'est pas responsive devices. Sur les tablettes et smartphones, l'affichage de mon menu est moche, alors que l'on devrait voir apparaître l'icone sous forme de 3 barres (menu mobile).
Vous pouvez avoir les codes sources de mon menu ici via ce lien:
https://solfc.net/menu%20a%20responsiver/navbar.rar

Merci d'avance et j'espère vraiment régler ce soucis au plus vite!
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
13 nov. 2019 à 20:28
Bonjour,

Pour obtenir de l'aide, merci de poster ton code directement sur ce forum en utilisant les balises de code
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

0
Réponse 2 / 3
Utilisateur anonyme
13 nov. 2019 à 20:36
Bonjour! J'ai un site web dont le menu n'est pas responsive devices. Sur les tablettes et smartphones, l'affichage de mon menu est moche, alors que l'on devrait voir apparaître l'icone sous forme de 3 barres (menu mobile).
Merci d'avance et j'espère vraiment régler ce soucis au plus vite!

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic,300italic,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>
  <header class="header">
    <div style="" class="container">
      <div class="row">
        <div class="col-sm-12 po-s">
          <div class="toggle-btn">
            <div class="icon menu1">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
<!--           <div class="logo col-sm-1">
            <a href="/">Logo</a>
          </div> -->
          <nav class="nav col-sm-11">
            <ul class="main-nav">
              <li class="active">
                <a data-parent-menu="Home" href="#">Home</a>
              </li>
              <li>
                <a data-parent-menu="About" href="#">About</a>
              </li>
              <li>
                <a data-parent-menu="Company" href="#">Company</a>
              </li>
              <li>
                <a data-parent-menu="Categories" href="#">Categories</a>
              </li>
              <li>
                <a data-parent-menu="Careers" href="#">Careers</a>
              </li>
              <li>
                <a data-parent-menu="News" href="#">News</a>
              </li>
              <li class="function-addon">
                <a href="#" title="search" data-parent-menu="search">Search</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <nav class="nav-responsive">
      <ul class="main-nav-responsive">
        <li class="">
          <a href="#" title="Home" data-parent-menu="Home">Home</a>
        </li>
        <li class="">
          <a href="#" title="About" data-parent-menu="Brands">Brands</a>
          <div style="display: none" class="sub-menu-responsive">
            <ul>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Title">Menu Item</a></li>
            </ul>
          </div>
          <span class="fa fa-angle-down nav-arrow"></span>
        </li>
        <li class="">
          <a href="#" title="Company" data-parent-menu="Company">Company</a>
          <div style="display: none" class="sub-menu-responsive">
            <ul>
              <li><a href="#" title="Company">Company</a></li>
              <li><a href="#" title="Executive Board">Executive Board</a></li>
              <li><a href="#" title="Supervisory Board">Supervisory Board</a></li>
            </ul>
          </div>
          <span class="fa fa-angle-down nav-arrow"></span>
        </li>
        <li class="">
          <a href="#" title="Investor-Relations" data-parent-menu="Investor-Relations">Investor Relations</a>
          <div style="display: none" class="sub-menu-responsive">
            <ul>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
            </ul>
          </div>
          <span class="fa fa-angle-down nav-arrow"></span>
        </li>
        <li class="active">
          <a href="/en/careers/" title="Careers" data-parent-menu="Careers">Careers</a>
          <div style="display: none" class="sub-menu-responsive">
            <ul>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
              <li><a href="#" title="Menu Item">Menu Item</a></li>
            </ul>
          </div>
          <span class="fa fa-angle-down nav-arrow"></span>
        </li>
        <li class="">
          <a href="/en/News/" title="News" data-parent-menu="News">News</a>
        </li>
        <li>
          <a href="#" title="Languages">Languages</a>
          <div style="display: none" class="sub-menu-responsive">
            <ul>
              <li class="active">
                <a href="/en/careers/">English</a>
              </li>
              <li class="">
                <a href="/de/karriere/">Deutsch</a>
              </li>
            </ul>
          </div>
          <span class="fa fa-angle-down nav-arrow"></span>
        </li>
        <li class="function-addon">
          <form method="get" action="/en/search-results/" class="form-search">
            <input value="" name="searchText" placeholder="Search" class="input-form">
            <span class="ktm-icon-search"></span>
            <a href="#" class="clear-input">x</a>
          </form>
        </li>
      </ul>
    </nav>
  </header>
  <div id="search-sub-menu" class="sub-menu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <form method="get" action="" class="search-form">
            <input value="" name="searchText" class="input-form" placeholder="search..">
          </form>
        </div>
      </div>
    </div>
  </div>
  <div id="About-sub-menu" class="sub-menu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="Company-sub-menu" class="sub-menu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="Categories-sub-menu" class="sub-menu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="Careers-sub-menu" class="sub-menu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
            <li><a href="#" title="Menu Item">Menu Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>



CSS 
body {
  margin: 0;
  background: url(https://images.unsplash.com/photo-1460501501851-d5946a18e552?ixlib=rb-0.3.5&q=80&fm=jpg) no-repeat top center;
  background-size: cover;
}

.toggle-btn,
.nav-responsive {
  display: none;
}

header {
  position: relative;
  padding: 50px 0 0;
  background: white;
  z-index: 3;
}

@media only screen and (min-width:1200px) {
  header .po-s .pull-left {
    max-width: 80%;
  }

}

header .logo {
  margin: 0 0 30px;
  font-size: 30px;
}

header .nav {
  padding-top: 1.25rem;
}

@media only screen and (min-width:1200px) {
  header .nav {
    padding-top: 0;
  }

}

header .main-nav > li {
  display: inline-block;
/*   margin-right: 30px; */
}

header .main-nav > li a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
  padding-right: 15px;
  padding-left: 15px;
}

@media only screen and (min-width:1200px) {
  header .main-nav > li a {
    font-size: 18px;
  }

}

header .main-nav > li a:hover {
  text-decoration: none;
}

header .main-nav > li > a {
  display: block;
  padding-bottom: 20px;
  position: relative;
}

@media only screen and (min-width:1200px) {
  header .main-nav > li > a {
    padding-bottom: 40px;
  }

}

header .main-nav .function-addon {
  margin: 0;
  width: 75px;
  text-align: center;
}

header .main-nav .function-addon .sub-menu {
  text-align: left;
}

header .main-nav .function-addon a > span:after {
  content: "";
  width: 1px;
  height: 25px;
  background: #000;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

header #hover-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background: #000;
}

.sub-menu {
  position: absolute;
  width: 100%;
  top: 100px;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  font-family: 'Roboto Condensed', sans-serif;
}

.sub-menu ul {
  list-style: none;
  margin: 10px 0;
}

.sub-menu ul li {
  display: inline-block;
  margin: 10px 25px 10px 0;
  padding-right: 25px;
  position: relative;
  opacity: 0;
  top: -30px;
}

.sub-menu ul li:before {
  content: "|";
  position: absolute;
  right: 0;
  top: -1px;
  color: #fff;
  display: block;
  font-size: 18px;
}

.sub-menu ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}

.sub-menu ul li:last-child:before {
  display: none;
}

.sub-menu ul li a {
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
}

.sub-menu ul li a:after {
  content: '';
  display: block;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

.sub-menu ul li a:hover:after {
  width: 100%;
  background: white;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width:1200px) {
  .header .container {
    position: relative;
  }

  .header .container .pull-right {
    position: absolute;
    right: 10px;
    width: 225px;
    top: -30px;
  }

  .header .container .pull-right img {
    width: 48%;
  }

  .header .main-nav .sub-menu-responsive {
    top: 160px;
  }

}

/* Medium Devices, Desktops */
@media only screen and (max-width:992px) {
  .header .main-nav > li {
    margin-right: 20px;
  }

  .header .main-nav > li a {
    font-size: 16px;
  }

  .header .main-nav .function-addon {
    width: 55px;
    margin: 0;
  }

  .header .main-nav .sub-menu-responsive {
    top: 157px;
  }

}

/* Small Devices, Tablets */
@media only screen and (max-width:768px) {
  .sub-menu {
    display: none;
  }

  .header {
    padding: 0;
  }

  .header a {
    outline: 0;
  }

  .header .toggle-btn,
  .header .nav-responsive {
    display: block;
  }

  .header .toggle-btn {
    position: absolute;
    top: 10px;
  }

  .header .nav-responsive {
    width: 100%;
    position: absolute;
    z-index: 16;
    top: 91px;
    font-family: "TradeGothicLT", Arial, Helvetica, sans-serif;
    font-size: 20px;
  }

  .header .nav-responsive .main-nav-responsive {
    display: none;
  }

  .header .nav-responsive ul {
    background: #565656;
    list-style: none;
    padding: 0;
  }

  .header .nav-responsive ul li {
    width: 100%;
    position: relative;
  }

  .header .nav-responsive ul li a {
    padding: 20px 20px;
    display: block;
    text-transform: uppercase;
    color: white;
    border-bottom: 1px solid #777777;
    margin: 0 15px;
  }

  .header .nav-responsive ul li a:hover {
    text-decoration: none;
  }

  .header .nav-responsive ul li .sub-menu-responsive ul {
    list-style: none;
    padding: 0;
    background: black;
  }

  .header .nav-responsive ul li .sub-menu-responsive ul li a {
    border: none;
  }

  .header .nav-responsive ul li .fa {
    float: right;
    color: white;
    position: absolute;
    font-size: 35px;
    line-height: 2;
    right: 28px;
    top: 0;
    display: block;
    width: 40px;
    text-align: center;
  }

  .header .nav-responsive ul .function-addon {
    color: white;
    padding: 30px 0;
  }

  .header .nav-responsive ul .function-addon .form-search {
    margin: 10px 15px;
    border: 1px solid #777777;
  }

  .header .nav-responsive ul .function-addon .form-search .input-form {
    background: #565656;
    border: none;
    width: 95%;
    padding: 10px 20px 10px 50px;
    font-size: 15px;
  }

  .header .nav-responsive ul .function-addon .form-search .ktm-icon-search {
    display: block;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    position: absolute;
    top: 38px;
  }

  .header .nav-responsive ul .function-addon .form-search .clear-input {
    position: absolute;
    border: none;
    top: 47px;
    right: 24px;
    width: 18px;
    padding: 0;
    background: url(../images/clear-input.png) no-repeat center center;
    background-size: contain;
    text-indent: -9999px;
  }

  .header .pull-left {
    margin-top: 10px;
    position: relative;
  }

  .header .pull-left .btn-toggle {
    position: absolute;
    top: 10px;
  }

  .header .pull-left .menu1 {
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    height: 3em;
    margin: 2%;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 3.5em;
    -webkit-tap-highlight-color: transparent;
    float: left;
  }

  .header .pull-left .menu1 span {
    background: #222222;
    border-radius: 2em;
    height: 0.5em;
    position: absolute;
    transition: 0.2s ease-in-out;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  .header .pull-left .menu1 span {
    left: 0;
  }

  .header .pull-left .menu1 span:nth-child(1) {
    top: 0;
  }

  .header .pull-left .menu1 span:nth-child(2) {
    top: 1.2em;
  }

  .header .pull-left .menu1 span:nth-child(3) {
    top: 2.4em;
  }
  .header .pull-left .open.menu1 span:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(1em, 0.9em);
    -ms-transform: rotate(45deg) translate(1em, 0.9em);
    transform: rotate(45deg) translate(1em, 0.9em);
  }

  .header .pull-left .open.menu1 span:nth-child(2) {
    opacity: 0;
  }

  .header .pull-left .open.menu1 span:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(0.8em, -0.8em);
    -ms-transform: rotate(-45deg) translate(0.8em, -0.8em);
    transform: rotate(-45deg) translate(0.8em, -0.8em);
  }

  .header .pull-left .logo {
    float: right;
    width: 165px;
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 53px;
  }

  .header .pull-left .logo img {
    width: 100%;
  }

  .header .pull-left .nav {
    display: none;
  }

  .header .container .pull-right {
    width: 165px;
    margin: 20px 0;
    top: -6px;
  }

  .header .container .pull-right ul li img {
    width: 47%;
  }

}

.search-form {
  position: relative;
  background: url("../images/search-icon.png") no-repeat 0 20px;
}

.search-form .input-form {
  width: 100%;
  font-size: 50px;
  margin: 0;
  padding: 10px 0 10px 65px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #fff;
  background: none;
  border: 0;
}

.search-form .input-form:focus {
  outline: none;
}

.search-form .input-form::-webkit-input-placeholder {
  color: #b5b5b5;
  font-family: 'Roboto Condensed', sans-serif;
}

.search-form .input-form::-moz-placeholder {
  color: #b5b5b5;
  font-family: 'Roboto Condensed', sans-serif;
}

.search-form .input-form:-ms-input-placeholder {
  color: #b5b5b5;
  font-family: 'Roboto Condensed', sans-serif;
}

.search-form span {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 50px;
  color: #6c6d71;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Extra Small Devices, Phones */
@media only screen and (max-width:480px) {
  .header .nav-responsive {
    top: 65px;
    left: 0;
  }

  .header .nav-responsive ul li .fa {
    right: 13px;
  }

  .header .nav-responsive ul .function-addon .form-search .clear-input {
    right: 10px;
  }

  .header .pull-left {
    margin-top: 5px;
  }

  .header .pull-left .logo {
    width: 110px;
    margin-bottom: 35px;
  }

  .header .container .pull-right {
    width: 110px;
    top: -5px;
  }

  .header .container .pull-right ul li img {
    width: 46%;
  }

}

/* Custom, iPhone Retina */
@media only screen and (max-width:320px) {
  .header .pull-left .logo {
    width: 80px;
    margin-top: 7px;
    margin-left: 50px;
  }

  .header .container .pull-right {
    width: 100px;
  }

  .header .container .pull-right ul li img {
    width: 45%;
  }

}



SCRIPT 
function animatedBottomLineNavigation() {
  var $el,
    leftPos,
    newWidth,
    $mainNav = $(".main-nav");

  $mainNav.append("<li id='hover-line'></li>");
  var $hoverLine = $("#hover-line");

  $hoverLine
    .width($(".main-nav li.active").width())
    .css("left", $(".active a").position().left)
    .data("origLeft", $hoverLine.position().left)
    .data("origWidth", $hoverLine.width());

  $(".main-nav > li").hover(
    function() {
      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.width();
      $hoverLine.stop().animate({
        left: leftPos,
        width: newWidth
      });
    },
    function() {
      $hoverLine.stop().animate({
        left: $hoverLine.data("origLeft"),
        width: $hoverLine.data("origWidth")
      });
    }
  );
}

function updateAnimatedBottomLinePosition() {
  var $hoverLine = $("#magic-line");
  if ($hoverLine.length > 0) {
    $("#magic-line")
      .width($(".main-nav li.active").width())
      .css("left", $(".active a").position().left)
      .data("origLeft", $hoverLine.position().left)
      .data("origWidth", $hoverLine.width());
  }
}

function addCounter(format) {
  if ($(".animation-counter")) {
    $(".animation-counter .counter").each(function(index, ele) {
      var counterObj = {
        fromValue: parseInt($(this).attr("data-from"), 10),
        toValue: parseInt($(this).attr("data-to"), 10),
        speed: parseInt($(this).attr("data-speed"), 10)
      };
      var distanceMinMax =
        counterObj.fromValue < counterObj.toValue
          ? counterObj.toValue - counterObj.fromValue
          : counterObj.fromValue - counterObj.toValue;
      var animatedBlock = $(this).parent();

      if (counterObj.fromValue > counterObj.toValue) {
        for (var i = counterObj.toValue + 1; i <= counterObj.fromValue; i++) {
          switch (format) {
            case "thousand":
              animatedBlock.prepend("<i>" + number_format(i) + "</i>");
              break;
            default:
              animatedBlock.prepend("<i>" + i + "</i>");
              break;
          }
        }
      } else {
        for (var i = counterObj.toValue - 1; i >= counterObj.fromValue; i--) {
          switch (format) {
            case "thousand":
              animatedBlock.prepend("<i>" + number_format(i) + "</i>");
              break;
            default:
              animatedBlock.prepend("<i>" + i + "</i>");
              break;
          }
        }
      }

      setTimeout(function() {
        animatedBlock.animate(
          {
            top: -(animatedBlock.find("i").height() * distanceMinMax)
          },
          {
            duration: counterObj.speed,
            specialEasing: {
              top: "swing"
            }
          }
        );
      }, 100 + index * 50);
    });

    $(window).on("resize", function() {
      if ($(".animation-counter")) {
        $(".animation-counter .counter").each(function(index, ele) {
          var counterObj = {
            fromValue: parseInt($(this).attr("data-from"), 10),
            toValue: parseInt($(this).attr("data-to"), 10),
            speed: parseInt($(this).attr("data-speed"), 10)
          };
          var distanceMinMax =
            counterObj.fromValue < counterObj.toValue
              ? counterObj.toValue - counterObj.fromValue
              : counterObj.fromValue - counterObj.toValue;
          var animatedBlock = $(this).parent();
          animatedBlock.css({
            top: -(animatedBlock.find("i").height() * distanceMinMax)
          });
        });
      }
    });
  }
}

function slideDownMainMenu() {
  var mainList = $(".main-nav li a");
  var isOverSubMenu = false;
  var isOverMainMenu = false;

  mainList.hover(
    function() {
      isOverMainMenu = true;
      var directSubMenu = $(
        "#" +
          $(this)
            .attr("data-parent-menu")
            .replace(" ", "-") +
          "-sub-menu"
      );
      var header = $("header");
      var headerHeight =
        parseInt(header.height(), 10) +
        parseInt(header.css("padding-top"), 10) +
        parseInt(header.css("padding-bottom"), 10) +
        parseInt(header.css("margin-top"), 10) +
        parseInt(header.css("margin-bottom"), 10);
      $(".sub-menu").css({
        opacity: 0,
        top: headerHeight - 100,
        visibility: "hidden"
      });
      directSubMenu.find("li").each(function(index, ele) {
        $(ele).removeAttr("style");
      });
      directSubMenu.css({
        opacity: 1,
        top: headerHeight,
        visibility: "visible"
      });
      directSubMenu.find("li").each(function(index, ele) {
        setTimeout(function() {
          $(ele).animate(
            {
              opacity: 1.0,
              top: 0
            },
            {
              duration: 500
            }
          );
        }, 100 + index * 50);
      });
    },
    function() {
      isOverMainMenu = false;
      var directSubMenu = $(
        "#" +
          $(this)
            .attr("data-parent-menu")
            .replace(" ", "-") +
          "-sub-menu"
      );
      setTimeout(function() {
        if (!isOverSubMenu) {
          directSubMenu.css({
            opacity: 0,
            top: 100,
            visibility: "hidden"
          });
          directSubMenu.find("li").each(function(index, ele) {
            $(ele).removeAttr("style");
          });
        }
      }, 100);
    }
  );

  $(".sub-menu").hover(
    function() {
      isOverSubMenu = true;
    },
    function() {
      isOverSubMenu = false;
      $(".sub-menu")
        .find("li")
        .each(function(index, ele) {
          $(ele).removeAttr("style");
        });
      setTimeout(function() {
        if (!isOverMainMenu)
          $(".sub-menu").css({
            opacity: 0,
            top: 100,
            visibility: "hidden"
          });
      }, 100);
    }
  );
}

function searchPlaceHolder() {
  var bgUrl = "url('../images/search.png')";
  $("#search-sub-menu .input-form").on(
    "change keydown paste input",
    function() {
      if ($(this).val() == "") {
        $(this).css("background-image", bgUrl);
      } else {
        $(this).css("background-image", "none");
      }
    }
  );
}

function hideMenuNavigation() {
  // for resize to hide menu navigation
  if ($(".main-nav-responsive").css("display") != "none") {
    $(".main-nav-responsive").hide();
    $(".icon").removeClass("open");
    $(".sub-menu-responsive").hide();
    $(".sub-menu-responsive")
      .parent()
      .find("a")
      .css("border-bottom", "1px solid #777777");
    $(".sub-menu-responsive")
      .parent()
      .find(".nav-arrow")
      .removeClass("fa-angle-up")
      .addClass("fa-angle-down");
  }
}

function hoverOnTouchDevices(element, classToRemove) {
  $(element).on("touchstart MSPointerDown", function(event) {
    if (event.touches.length > 1) return;
    $(".type-of-categories ul li").removeClass(classToRemove);
    $(this).addClass(classToRemove);
  });
}

$(window).on("resize", function() {
  updateAnimatedBottomLinePosition();
});

$(window).on("orientationchange", function() {
  hideMenuNavigation();
});

$(document).ready(function() {
  hoverOnTouchDevices(".type-of-categories ul li", "active");
  // slide toggle
  $(".btn-toggle").click(function() {
    var timeLineFull = $(this)
      .parent()
      .parent()
      .find(".timeline-full");
    var isVisible = $(timeLineFull).is(":visible");
    var sectionTimeline = $(this).closest(".section-timeline");
    sectionTimeline
      .find(".btn-toggle")
      .removeClass("fa-angle-up")
      .addClass("fa-angle-down");
    sectionTimeline.find(".timeline-full").slideUp();
    if (isVisible) {
      $(timeLineFull).slideUp();
      $(this)
        .removeClass("fa-angle-up")
        .addClass("fa-angle-down");
    } else {
      $(timeLineFull).slideDown();
      $(this)
        .removeClass("fa-angle-down")
        .addClass("fa-angle-up");
    }
  });

  //RESPONSIVE: header navigation

  $(".icon").on("click", function() {
    $(".main-nav-responsive").slideToggle();
    $(this).toggleClass("open");

    return false;
  });

  if (
    $(".main-nav-responsive li .sub-menu-responsive").css("display") != "none"
  )
    $(".main-nav-responsive li .sub-menu")
      .parent()
      .find("a")
      .css("border", "none");
  $(".main-nav-responsive > li > .nav-arrow").on("click", function() {
    var hasSub = $(this)
      .parent()
      .has(".sub-menu-responsive");
    var sub = $(this)
      .parent()
      .find(".sub-menu-responsive");
    if (sub.css("display") == "none") {
      sub
        .parent()
        .find("a")
        .css("border", "none");
      sub.slideDown();
      $(this)
        .parent()
        .find(".nav-arrow")
        .removeClass("fa-angle-down")
        .addClass("fa-angle-up");
    } else {
      sub.slideUp(function() {
        sub
          .parent()
          .find("a")
          .css("border-bottom", "1px solid #777777");
      });
      $(this)
        .parent()
        .find(".nav-arrow")
        .removeClass("fa-angle-up")
        .addClass("fa-angle-down");
    }
    if ($(this).attr("href") == "#") return false;
  });

  // RESPONSIVE: add clear-input button to clear text in search text box
  $(".form-search .clear-input").on("click", function() {
    $(this)
      .parent()
      .find(".input-form")
      .val("");
    $(this)
      .parent()
      .find(".input-form")
      .val("");
    return false;
  });

  slideDownMainMenu();
  searchPlaceHolder();
  scrollingEffects(".quote-module", "fadeInUp");
});
$(window).load(function() {
  animatedBottomLineNavigation();
  updateAnimatedBottomLinePosition();
});
0
Réponse 3 / 3
Whismeril Messages postés 19145 Date d'inscription mardi 11 mars 2003 Statut Contributeur Dernière intervention 29 septembre 2024 919
13 nov. 2019 à 21:19
doublon
https://forums.commentcamarche.net/forum/affich-36310607-responsive-menu-menu-mobile-a-adapter-sur-les-ecrans-des-mobinautes#p36310611

mais ce fil est plus propre
0
Utilisateur anonyme
14 nov. 2019 à 15:06
Merci. Supprime les autres et laisse le bon forum stp. merci!
0

Discussions similaires

Nouveau coco tchat ?
LoupiotteDesTenebres -
brucine -

9 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.
Utilisateur anonyme -
Panth33ra -

20 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses