Есть ли способ сохранить мое меню в столбце при определенной ширине - PullRequest
Новая
       44

Есть ли способ сохранить мое меню в столбце при определенной ширине

0 голосов
/ 08 мая 2019

Я реализую адаптивное раскрывающееся меню для моего веб-сайта, и с помощью окна просмотра я хочу, чтобы оно выглядело как кто-то, кликабельное меню с одним столбцом, но когда я попадаю в «просмотр телефона» (600 пикселей), он получает несколько столбцов, какя могу заставить мое меню быть на одном столбце в CSS?

Вот мой код: 

body{
  margin: 0;
}
a {
  text-decoration: none;
  color: #ea5c0d;
  display: block;
}

.lang{
  float: right;
}

.lang img{
  height: 50%;
  width: 50%;
  padding-left: 30px;
  padding: 0;
}

.lang a{
  height: 6em;
  padding-left: 30px;
  padding: 0;
}

ul {
  list-style: none;
  position: relative;
  text-align: left;
}

li {
  float: left;
}

ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: #f7af3e;
  background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  text-align: center;
  text-shadow: 0.063em 0.063em 0.063em #333333;
}

ul.logo {
  position: relative;
  width: 16.250em;
  float: left;
  margin: 0;
  padding: 0;
  z-index: 1;
}

ul.logo a , img{
  width: 100%;
  height: 6em;
}

ul.primary li .CON {
  display: block;
  padding-right: 1.875em;
  padding-left: 1.875em;
  padding-top: 2.063em;
  padding-bottom: 1.938em;
  border-right: 0.063em solid #3D3D3D;
}


.menu-toggle-button , .primary a {
  transition: 1s;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {
  color: #b94503;
}

/* sousmenus */
ul.sousmenu {
  position: absolute;
  z-index: 2;
  box-shadow: 0.125em 0.125em 0.188em #505050;
  width: 35%;
  display:none;
  padding-left: 0;
}

ul.sousmenu li {
  float: none;
  margin: 0;
}

ul.sousmenu li a {
  border-bottom: 0.063em dotted #ccc;
  border-right: none;
  color: #000;
  padding: 0.938em 3.125em;
}

ul.sousmenu li:last-child a {
  border-bottom: none;
}

ul.sousmenu li a:hover {
  color: #000;
  background: #eeeeee;
}

/* sousmenu display*/
ul.primary li:hover ul {
  display: block;
  background: #fff;
}

/* keeps the tab background white */
ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
}

.primary {
	list-style: none;
	margin-left: 25em;
  margin-top: 0;
	padding: 0;
}

.primary .CON {
	display: inline-block;
	padding: 1rem;
}

.primary a:focus,
.primary a:hover {
	background-color: #444;
	outline: none;
}

.primary a:active {
	background-color: #666;
}

.menu-toggle-button {
	cursor: pointer;
	display: none;
	padding: 1rem;
	user-select: none;
}


.menu-toggle {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

@media only screen and (max-width: 1310px){
  ul.logo {
    display: none;
    visibility: hidden;
  }
  .primary{
    margin: 0;
  }
}

@media only screen and (max-width: 600px) {


  ul.logo , .lang{
    display: none;
    visibility: hidden;
  }


  .primary {
		flex-direction: column;
    margin: 0;
	}
	.primary .CON {
		width: 100%;
	}

.primary label{
  padding-top: 0;
  float: left;
}

ul.primary li .CON{
  border-right: 0;
}

	.menu-toggle:not(:checked) ~ .primary {
		display: none;
    float: left;
	}

	.menu-toggle-button {
		display: -webkit-box
	}

  #menu-toggle .menu-toggle:focus ~ .menu-toggle-button,
  #menu-toggle .menu-toggle-button:hover {
  	background-color: #444;
  }

  .menu-toggle:focus ~ .menu-toggle-button,
  .menu-toggle-button:hover {
  	background-color: #inherit;
  }

}
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test menu déroulant</title>
    <link rel="stylesheet" href="cssfeuilletest2.css">
  </head>
  <body>
<div>
<ul class="logo">
  <a href="test.html"><img src="Logo.png" alt="Logo"></a>
</ul>
<nav>
<input class="menu-toggle" id="menu-toggle" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☰</label>
  <ul class="primary">
    <li class="BonPl">
      <a class="CON">
      <input class="menu-toggle" id="menu-toggle1" type="checkbox">
      <label class="menu-toggle-button" for="menu-toggle">☶</label>
      Bon Plans</a>
      <ul class="sousmenu">
                  <li><a href="Pages/Sousmenus/frise.html">Histoire de la ville</a></li>
                  <li><a href="Pages/Sousmenus/archi.html">Architecture</a></li>
                </ul>
    </li>
      <li class="InfoPr">
        <a class="CON">
        <input class="menu-toggle" id="menu-toggle2" type="checkbox">
        <label class="menu-toggle-button" for="menu-toggle">☶</label>
        Infos Pratiques</a>
        <ul class="sousmenu">
                <li><a href="Pages/Sousmenus/calendar.html">Actualités de la ville</a></li>
                  <li><a href="Pages/Sousmenus/Transports.html">Transports</a></li>
                  </ul>
      </li>
      <li class="BonPl">
      <a class="CON">
      <input class="menu-toggle" id="menu-toggle3" type="checkbox">
      <label class="menu-toggle-button" for="menu-toggle">☶</label>
      Astuces</a>
      <ul class="sousmenu">
            <li><a href="Pages/Sousmenus/Petits Prix.html">Nos bonnes adresses</a></li>
            <li><a href="Pages/Sousmenus/Insolite.html">Insolites</a></li>
            </ul>
        </li>
        <li class="Sejour">
          <a class="CON">
          <input class="menu-toggle" id="menu-toggle4" type="checkbox">
          <label class="menu-toggle-button" for="menu-toggle">☶</label>
          Visiter Florence</a>
                <ul class="sousmenu">
                  <li><a href="Pages/Sousmenus/autour.html">Autour de vous</a></li>
                  <li><a href="Pages/Sousmenus/circuits.html">Nos circuit</a></li>
                  </ul>
                </li>
        <li>
        <a class="CON">
        <input class="menu-toggle" id="menu-toggle4" type="checkbox">
        <label class="menu-toggle-button" for="menu-toggle">☶</label>
        Authentification</a>
            <ul class="sousmenu">
              <li><a>Se connecter</a></li>
              <li><a>S'inscrire</a></li>
            </ul>
        </li>
        <li class="lang">
          <a href=""><img src="langswitch.png" alt="en"></a>
        </li>

      </ul>
      </nav>

        </div>


  </body>
</html>
...