Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Резиновое меню
Резиновое меню
Cruze
Сообщений: 5
Репутация: 0

Сообщение # 1 | 02:39:54
Всем привет, очень прошу помощи.
Верстаю себе сайт с шаблона №1257.
Можете глянуть led-complekt.ru.
Вверху там есть меню - то что мне нужно, но беда в том, что оно не отрезинено. То есть не по всей ширине блока.А нужно чтобы по всей. И при добавлении нового пункта меню, оно также успешно резинилось. Я "тру-кодер", разбирался долго, читал маны и рекомендации о том, что нужно сделать через таблицу, но так и не смог настроить CSS как нужно. Очень прошу - пожалуйста, исправьте код, чтобы меню стало резиновым(


Код
/* Menus */
nav {
  padding: 0;
  text-align: center;
  background: #138bd0;
   
  /*border-bottom: 1px solid #3281d3;*/
  box-shadow: 0 1px 0 #1a1c1d;
  width: 100%;
  display: table;
  }

nav ul.uMenuRoot {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  }
nav ul ul {
  background: none repeat scroll 0 0 #f5f5f5;
  left: -1px;
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: all 0.2s ease-out 0.15s;
  visibility: hidden;
  white-space: nowrap;
  z-index: 1;
  text-align: left;
  }
  nav > ul > ul {border-left: 1px solid #00448a;}
nav ul ul ul {
  left: 100%;
  padding-left: 1px;
  top: 0;
}
nav ul.uMenuRoot > li {
  list-style: none;  
  display: inline-block;  
  margin: 0;  
  padding: 0;
  position: relative;
  border-left: 1px solid #ffffff;
  }
  nav ul.uMenuRoot > li:first-child {border: none;}
  nav ul.uMenuRoot > li:last-child {border-right: 1px solid #ffffff;}
   
nav ul.uMenuRoot > li.has-submenu:hover {border-left: 1px solid #00448a;}
nav ul.uMenuRoot > li > ul {border-left: 1px solid #00448a;}
nav li {
  float: left;
  list-style: none outside none !important;
  position: relative;
}
nav li.has-submenu > a:after {
  content: "+";
  display: block;
  position: absolute;
  right: 5px;
  top: 0;
   
}

nav li a:hover + ul {
  opacity: 1;
  visibility: visible;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}
nav li li {float: none;}

nav li li a {padding: 0 20px; display: block; line-height: 40px; text-decoration: none; color: #555;}
nav li li:hover {background: #f5f5f5;}
nav li li:hover > a, nav li li:hover a:hover {background: #e3e3e3; color: #000; text-decoration: none;}
/* ----- */

/* Site Menus */

ul.uMenuRoot > li > a {
  font-size: 100%;
  text-decoration: none;
  display: block;
   
  color: #fff;
  padding: 0 20px;
  margin: 0 0 0 0;
  line-height: 35px;
  }
   
nav li:hover > a, ul.uMenuRoot > li > a:hover, ul.uMenuRoot > li > .uMenuItemA {
  background: #0269b1;
  /*background-image: -webkit-linear-gradient(bottom, #138bd0, #094c96); /* For Chrome and Safari */
  /*background-image: -moz-linear-gradient(bottom, #138bd0, #094c96); /* For old Fx (3.6 to 15) */
  /*background-image: -ms-linear-gradient(bottom, #138bd0, #094c96); /* For pre-releases of IE 10*/
  /*background-image: -o-linear-gradient(bottom, #138bd0, #094c96); /* For old Opera (11.1 to 12.0) */  
  background-image: #138bd0, #094c96; /* Standard syntax; must be last */  
  }
   
.show-menu {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 20px;
  cursor: pointer;
  background: #00448a;
  display: none;
  color: #fff;
  text-align: center;
  font-size: 80%;
  padding: 5px 10px;
  font-weight: bold;
  }
  .show-menu:hover {background: #e5e5e5;color: #000;}
/* --------- */
Irina_M
Сообщений: 603
Репутация: 67

Сообщение # 2 | 11:50:45
Cruze, уточните, пожалуйста, детальней, что имеется в виду "отрезинилось": http://screencast.com/t/jXzTZEkjw ?
Cruze
Сообщений: 5
Репутация: 0

Сообщение # 3 | 12:24:20
Irina_M, чтобы справа в меню не было пустого места, а все пункты меню расположились по ширине голубого блока меню (не всего экрана)
Irina_M
Сообщений: 603
Репутация: 67

Сообщение # 4 | 12:41:15
Cruze, для редактирования шаблонов необходимо иметь хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях.
Перед любыми изменениями в шаблоне всегда сохраняйте резервную копию (бекап шаблона) (http://screencast.com/t/IsFYahlM0)

Попробуйте убрать свойство float: left - (Дизайн - Управление дизайном (СSS) - строка 170) - http://screencast.com/t/0CTuq4nvIadu
Пункты меню выровняются по центру блока, а новый пункт появится также по центру на следующей строке.
Cruze
Сообщений: 5
Репутация: 0

Сообщение # 5 | 13:10:42
бэкап есть, но он мне не нужен сейчас.
Стиль я убрал, но такое расположение не верно, нужно горизонтальное меню, в ширину голубого блока. Чтобы все пункты меню были на одной линии и растягивались.
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Резиновое меню
Страница 1 из 11
Поиск: