Скрыть меню

Тема в разделе "Создание структуры", создана пользователем Pasha89, 20.08.2016.

  1. Offline

    Pasha89 Недавно здесь

    Регистрация:
    15.07.2014
    Сообщения:
    23
    Симпатии:
    0
    Пол:
    Мужской
    Здравстуйте! Подскажите пожалуйста как скрыть меню, а то при просмотре на планшете пункты меню становятся в 2 строчки, а на мобильнике вертикально в столбик. Что надо дописать в коде. P.S. меню делаю для Joomla 3 только HTML и CSS
    Код (html):
    1. <!-- Меню -->
    2.  <nav class="moduletable_nav", class="clearfix" >
    3.  <ul class="clearfix">
    4.  <jdoc:include type="modules" name="menu1" style="xhtml"/>
    5.  </ul>
    6.  </nav>
    7. <!-- Конец меню -->

    Код (css):
    1. /* Clearfix */
    2. .clearfix:before,
    3. .clearfix:after {
    4.     content: " ";
    5.     display: table;
    6. }
    7. .clearfix:after {
    8.     clear: both;
    9. }
    10. .clearfix {
    11.     *zoom: 1;
    12. }
    13.  
    14. /* Basic Styles */
    15. /* body {
    16.  background-color: #d16d08;
    17. }
    18.  */ .moduletable_nav {
    19.  height: 40px;
    20.  width: 100%;
    21.  background-color:rgb(209, 109, [IMG]http://joomlaforum.ru/Smileys/default/cool.gif[/IMG];
    22.  background-image: -webkit-linear-gradient(left, #cc5500 10%, #ed8e11 80%, #cc5500 100% );
    23.  background-image: -moz-linear-gradient(left, #cc5500 10%, #ed8e11 80%, #cc5500 100% );
    24.  background-image: -o-linear-gradient(left, #cc5500 10%, #ed8e11 80%, #cc5500 100% );
    25.  background-image: -ms-linear-gradient(left, #cc5500 10%, #ed8e11 80%, #cc5500 100% );
    26.  font-size: 11pt;
    27.  font-family: 'PT Sans', Arial, sans-serif;
    28.  font-weight: bold;
    29.  position: relative;
    30.  border-bottom: 2px solid #283744;
    31.  /* box-shadow: 2px 2px 7px rgba(0,0,0,.5); */
    32.  
    33. }
    34.  .moduletable_nav ul {
    35.  padding: 0;
    36.  margin: 0 auto;
    37.  width: 700px;
    38.  height: 40px;
    39. }
    40.  .moduletable_nav li {
    41.  display: inline;
    42.  float: left;
    43. }
    44.  .moduletable_nav a {
    45.  color: #fff;
    46.  display: inline-block;
    47.  width: 100px;
    48.  text-align: center;
    49.  text-decoration: none;
    50.  line-height: 40px;
    51.  text-shadow: 1px 1px 0px #283744;
    52. }
    53.  .moduletable_nav li a {
    54.  border-right: 1px solid #ff6a00;
    55.  box-sizing:border-box;
    56.  -moz-box-sizing:border-box;
    57.  -webkit-box-sizing:border-box;
    58. }
    59.  .moduletable_nav li:last-child a {
    60.  border-right: 0;
    61. }
    62.  .moduletable_nav a:hover,  .moduletable_nav a:active {
    63.  background-color: #118701;
    64. }
    65.  .moduletable_nav a#pull {
    66.  display: none;
    67. }
    68.  
    69. /*Styles for screen 600px and lower*/
    70. @media screen and (max-width: 750px) {
    71.   .moduletable_nav {
    72.    height: auto;
    73.  width: 100%;
    74.  
    75.  }
    76.     .moduletable_nav ul {
    77.    width: 100%;
    78.    display: block;
    79.    height: auto;
    80.    }
    81.     .moduletable_nav li {
    82.    width: 50%;
    83.    float: left;
    84.    position: relative;
    85.    }
    86.     .moduletable_nav li a {
    87.  border-bottom: 1px solid #576979;
    88.  border-right: 1px solid #576979;
    89.  }
    90.     .moduletable_nav a {
    91.    text-align: left;
    92.    width: 100%;
    93.    text-indent: 25px;
    94.    }
    95. }
    96.  
    97. /*Styles for screen 515px and lower*/
    98. @media only screen and (max-width : 480px) {
    99.   .moduletable_nav {
    100.  border-bottom: 0;
    101.  }
    102.   .moduletable_nav ul {
    103.  display: block;
    104.  height: auto;
    105.  width: 100%;
    106.  }
    107.   .moduletable_nav a#pull {
    108.  display: block;
    109.  background-color: #283744;
    110.  width: 100%;
    111.  position: relative;
    112.  }
    113.   .moduletable_nav a#pull:after {
    114.  content:"";
    115.  background: url('nav-icon.png') no-repeat;
    116.  width: 30px;
    117.  height: 30px;
    118.  display: inline-block;
    119.  position: absolute;
    120.  right: 15px;
    121.  top: 10px;
    122.  }
    123. }
    124.  
    125. /*Smartphone*/
    126. @media only screen and (max-width : 320px) {
    127.   .moduletable_nav li {
    128.  display: block;
    129.  float: none;
    130.  width: 100%;
    131.  }
    132.   .moduletable_nav li a {
    133.  border-bottom: 1px solid #576979;
    134.  }
    135. }
     
  2.  
  3. shurikkan
    Offline

    shurikkan Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Это вообще что? Где ты научился так писать?))

    Не очень понятен вопрос. Как скрыть меню при отображении на экранах с низким разрешением?
     

Поделиться этой страницей

Загрузка...