¿Cómo adaptar Menú responsive jQuery/css?

El diseño del menú esta funcionando muy bien en un 90% el cuerpo del menú se adapta al igual que la flecha blanca sin problema pero en una resolución de pantalla completa(1349px) o más.

Un pequeño detalle más es que si añado un enlace de dos palabras(Sign In) en el menú y al cambiar la resolución de pantalla este enlace de dos palabras se sale de su ubicación lo ideal seria que se encimara uno tras otro de tal manera como sucede con los otros enlace de una sola palabra.

Actualización:

  *{
    margin: 0px;
    padding: 0px;
  }

  a {
    color: #777;
    text-decoration: none;
  }

  a:hover, a:focus {
    color: #515151;
    text-decoration: underline;
   }

  body {
    background-color: aliceblue;
  }

  nav {
    height: 24px;
    width: 100%;
    padding: 6px 0;
    background: #fbfbfb url(../img/grad.png) center top repeat-x;
  }

  nav ul {
    /*overflow: hidden;*/
    margin: 0;
    padding: 0;
  }

  nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 6);
    box-sizing: border-box;
  }

  nav ul li:first-child {
    border-left: none;
  }

  nav ul li a {
    display: block;
    text-decoration: none;
    color: #616161;
    padding: 3px 0;
    /*padding: 10px 0;*/
  }

  #dropdown1, #dropdown2 {
    position: relative;
  }

  .dropdown-menu {
    z-index:2;
  }

  #dropdown b.caret {
    /*position: relative;*/
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid #000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    margin-left: 3px;
    top: 12px;
    /*top: -8px;
    left: 55px;*/

  }

  b.caret {
    border-top-color: #777777;
    border-bottom-color: #777777;
  }

  #dropdown .dropdown-menu {
    /*top: 42px;
    left: -50px;*/
    /*left: 23px;
    width: 140px;*/
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    background-color: rgba(255,255,255,0.98);
    background-clip: padding-box;
    border-radius: 5px;
    border: 0 solid rgba(0,0,0,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }

  #dropdown .dropdown-menu:after {
     top: -6px;
     right: 10px;
     content: "";
     position: absolute;
     border-bottom: 6px solid #FFFFFF;
     border-left: 9px solid transparent;
     border-right: 9px solid transparent;
     border-bottom-color: rgba(255,255,255,0.98);
  }

  .dropdown-menu li {
    float: left;
    width: 100%;
    list-style: none;
  }

  .dropdown-menu li a {
    clear: both;
    color: #333333;
    display: block;
    line-height: 18px;
    padding: 3px 15px;
    font-weight: normal;
    white-space: nowrap;
  }

  .dropdown-menu li a:hover {
    color: #ffffff;
    background-color:#333333;
  }



  <nav>
    <ul>
      <li><a href="">123456789</a></li>
      <li><a href="">info@example.com</a></li>
      <ul id="dropdown">
        <li id="dropdown1"><a href="#">Español<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Español</a></li>
            <li><a href="#">Español</a></li>
          </ul>
        </li>
      </ul>
      <ul id="dropdown">
        <li id="dropdown2"><a href="#">Español  <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Español</a></li>
            <li><a href="#">Español</a></li>
          </ul>
        </li>
      </ul>
      <li><a href="">Sign In</a></li>
    </ul>
  </nav>
3
задан 17.08.2016, 11:12
2 ответа

Белая стрела языков вырисовывается с одним ::after в этом классе: #dropdown .dropdown-menu::after. Проблема состоит в том, что он posicionada относительно левой стороны, и когда он меняет размер, нарушает договор, если ты удаляешь свойство left и ты добавляешь стоимость для right, например 10px или другой, который ты шел бы лучше, решает эту проблему:

#dropdown .dropdown-menu::after {
    top: -6px;
    right: 10px;
    content: "";
    position: absolute;
    border-bottom: 6px solid #FFF;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom-color: #fff;
}

Для того, чтобы тебя не отпустил в другую линию текст нескольких слов, ты можешь использовать white-space: nowrap;

Здесь возможно видеть твой пример с моими изменениями: https://jsfiddle.net / blonfu / xe4k5n4x / 1 /

2
ответ дан 24.11.2019, 13:40

ты был бы должен определять media queries согласно размеру экрана.

я оставляю тебе это соединение для media queries developer mozilla.

я оставляю тебе пример, который используется в bootstrap, он не точно bootstrap, Bootstrap использует media queries CSS который они выбивают согласно размеру экрана 750px, 970px или 1170px. Очевидно ты был бы должен разрабатывать сначала для мобильного телефона после подниматься в большие такие экраны он был бы упрощен, где ты применился бы media queries.

//moviles
.caracs{
    width: 350px;
    font-family: 'Poppins', sans-serif;
}
//tabletas
@media (min-width: 768px) { 
    .caracs{
        width: 500px;
        font-family: 'Poppins', sans-serif;
    } 
}
//laptops o pantallas chicas de escritorio
@media (min-width: 992px) { 
    .caracs{
        width: 810px;
        font-family: 'Poppins', sans-serif;
    } 
}
//pantallas de escritorios grandes
@media (min-width: 1200px) { 
    .caracs{
        width: 1010px;
        font-family: 'Poppins', sans-serif;
    } 
}
0
ответ дан 24.11.2019, 13:40
  • 1
    друг, если ты можешь наблюдать, я не использую в и # 250; n ни одна @media ning и # 250; стиль того, что ты показываешь мне... Но в и # 250; n схвати и # 237; меню - responsive и приспособляемо. Пока сначала я хочу он состоит в том, чтобы приспосабливать, не используя @media для потом, если использовать их, чтобы предотвращать, что encimen один вслед за другим пока то, что я хочу, состоит в том, чтобы encime один вслед за другими соединил их men и # 250; двух слов (Сигн Ин). Я не оспариваю Ваш ответ но этот dem и # 225; s то, что я indicastes. –  Otto 11.08.2016, 02:22

Теги

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