Верхнее меню

[Orbos_2000]

Здравствуйте, сделал меню, но оно переносится на следующую строку после сужения экрана, как на снимке. Меню делал в генераторе. Что добавить? white-space: nowrap; не помогает.

Забыл прикрепить. 
 

 

В нормальном состоянии должно выглядеть вот-так. После манипуляций с масштабами страницы.

 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); #divmainmenu {    width: 822px; /* Ширина слоя в пикселах */    margin: 0 auto; /* Отступ слева и справа */    background-color: #FF0004;    height: 51px;    background-image: url(pic/menupodl.gif);    min-width: 822px;    }     #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button {  margin: 0 auto;  padding: 0;  border: 0;  list-style: none;  line-height: 1;  display: block;  position: relative;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}#cssmenu:after,#cssmenu > ul:after {  content: '.';  display: block;  clear: both;  visibility: hidden;  line-height: 0;  height: 0;}#cssmenu #menu-button {  display: none;}#cssmenu {  width: 770px;  font-family: 'Open Sans', Helvetica, sans-serif;  background: #663300;  background: -moz-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #854200), color-stop(100%, #3d1f00));  background: -webkit-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -o-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -ms-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: linear-gradient(to bottom, #854200 0%, #3d1f00 100%);}#cssmenu > ul {  background: url('pic/bg.png');  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);}#cssmenu > ul > li {  float: left;}#cssmenu > ul > li > a {  padding: 18px 25px 21px 25px;  border-right: 1px solid rgba(80, 80, 80, 0.12);  text-decoration: none;  font-size: 12px;  font-weight: 700;  color: #fabe55;  text-transform: uppercase;  letter-spacing: 1px;}#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a {  color: #ffe7c9;  background: #572b00;  background: rgba(0, 0, 0, 0.1);}#cssmenu > ul > li.has-sub > a {  padding-right: 45px;}#cssmenu > ul > li.has-sub > a::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 6px solid transparent;  border-top-color: #fabe55;  right: 17px;  top: 21.5px;}#cssmenu > ul > li.has-sub.active > a::after,#cssmenu > ul > li.has-sub:hover > a {  border-top-color: #ffe7c9;}#cssmenu ul ul {  position: absolute;  left: -9999px;  top: 60px;  padding-top: 6px;  font-size: 13px;  opacity: 0;  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;  -o-transition: top 0.2s ease, opacity 0.2s ease-in;  transition: top 0.2s ease, opacity 0.2s ease-in;}#cssmenu > ul > li > ul::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 5px solid transparent;  border-bottom-color: #663300;  top: -4px;  left: 20px;}#cssmenu ul ul ul::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 5px solid transparent;  border-right-color: #663300;  top: 11px;  left: -4px;}#cssmenu > ul > li > ul {  top: 120px;}#cssmenu > ul > li:hover > ul {  top: 51px;  left: 0;  opacity: 1;}#cssmenu ul ul ul {  padding-top: 0;  padding-left: 6px;}#cssmenu ul ul > li:hover > ul {  left: 180px;  top: 0;  opacity: 1;}#cssmenu ul ul li a {  text-decoration: none;  font-weight: 400;  padding: 11px 25px;  width: 180px;  color: #fabe55;  background: #663300;  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {  color: #ffe7c9;}#cssmenu ul ul li:first-child > a {  border-top-left-radius: 3px;  border-top-right-radius: 3px;}#cssmenu ul ul li:last-child > a {  border-bottom-left-radius: 3px;  border-bottom-right-radius: 3px;}#cssmenu > ul > li > ul::after {  position: absolute;  display: block;}#cssmenu ul ul li.has-sub > a::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 4px solid transparent;  border-left-color: #fabe55;  right: 17px;  top: 14px;}#cssmenu ul ul li.has-sub.active > a::after,#cssmenu ul ul li.has-sub:hover > a::after {  border-left-color: #ffe7c9;}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {  #cssmenu {    background: #663300;  }  #cssmenu > ul {    display: none;  }  #cssmenu > ul.open {    display: block;    border-top: 1px solid rgba(0, 0, 0, 0.1);  }  #cssmenu > ul > li {    float: none;  }  #cssmenu > ul > li > a {    padding: 18px 25px 18px 25px;    border-right: 0;  }  #cssmenu > ul > li:hover > a,  #cssmenu > ul > li.active > a {    background: rgba(0, 0, 0, 0.1);    ;  }  #cssmenu #menu-button {    display: block;    text-decoration: none;    font-size: 13px;    font-weight: 700;    color: #fabe55;    padding: 18px 25px 18px 25px;    text-transform: uppercase;    letter-spacing: 1px;    background: url('bg.png');    cursor: pointer;  }  #cssmenu ul ul,  #cssmenu ul li:hover > ul,  #cssmenu > ul > li > ul,  #cssmenu ul ul ul,  #cssmenu ul ul li:hover > ul {    left: 0;    top: auto;    opacity: 1;    width: 100%;    padding: 0;    position: relative;  }  #cssmenu ul ul li {    width: 100%;  }  #cssmenu ul ul li a {    width: 100%;    box-shadow: none;    padding-left: 35px;  }  #cssmenu ul ul ul li a {    padding-left: 45px;  }  #cssmenu ul ul li:first-child > a,  #cssmenu ul ul li:last-child > a {    border-radius: 0;  }  #cssmenu #menu-button::after {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    border-bottom: 2px solid #fabe55;    right: 25px;    top: 18px;  }  #cssmenu #menu-button::before {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    right: 25px;    top: 28px;  }  #cssmenu > ul > li.has-sub > a::after,  #cssmenu ul ul li.has-sub > a::after {    display: none;  }} $('#cssmenu').prepend('<div id="menu-button">Menu</div>');    $('#cssmenu #menu-button').on('click', function(){        var menu = $(this).next('ul');        if (menu.hasClass('open')) {            menu.removeClass('open');        }        else {            menu.addClass('open');        }    });

Edited June 4, 2014 by Orbos_2000

[wh1tegray]

снимка не вижу) есть живое, где посмотреть? ну или хотя бы просто кусок html... телепатических способностей не имею)

Edited June 4, 2014 by wh1tegray

[wh1tegray]

html кусок меню можно?

[npofopr]

с float: left; вам ничего не поможет.

или делайте таблицей или можете почитать http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

[Orbos_2000]

Вот, собственно весь код

<!doctype html><html><head><meta charset="utf-8"><title>юридическая компания</title><style>   	body{	background-color: #663300;	margin-left: 0px;	}   	#main{	width: 960px;	margin-top: 30px;	margin-right: auto;	margin-left: auto;	margin-bottom: 30px;	background-color: #e5bc6b;	border-radius: 10px;	border-color: #663300;		}		.textmain{	margin-left: 15px;	margin-top: 15px;	margin-right: 15px;	margin-bottom: 15px;	font-family: Calibri;	color: #663300;	line-height: 120%;	}		p.textmain{	margin-left: 15px;	margin-top: 15px;	margin-right: 15px;	margin-bottom: 15px;	font-family: Calibri;	color: #663300;	line-height: 120%;		}		h1.textmain {	font-style: italic;	font-size: 250%;	text-align: center;	font-family: Calibri;	color: #663300;	}			.ornopen{	text-align: center;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding-top: 1px;	padding-right: 1px;	padding-bottom: 1px;	padding-left: 1px;				}		#logo{	margin-right: auto;	margin-left: auto;	text-align: center;	padding-top: 30px;	padding-bottom: 30px;	}		#soderg{	width: 750px;	margin: 20px auto;	padding: 10px;	border-collapse: collapse;	border: thin dashed #000000;	border-spacing: 10px 10px;	}		#footer	{	width: 700px;	margin: 0px auto;	text-align: center;	line-height: 0pt;	padding-bottom: 25px;	padding-top: 0px;	}		#footer p		{		width: 700px;		margin: 0px auto;		padding: 0px;		line-height: 10px;		}/* Начало стили для таблицы с 3-мя колонками*/	.nTable {	width: 700px;	border-spacing: 12px 10px; /*расстояние*/	border-collapse: separate;	text-align: center;	margin-top: 1px;	margin-right: 1px;	margin-bottom: 1px;	margin-left: 1px;		}			.nTable  tr, td {	padding: 0px; /* Поля вокруг текста */	border: 2px solid  #663300; /* Рамка вокруг ячеек */	margin-top: 1px;	margin-right: 1px;	margin-bottom: 1px;		 }			.nTable td {		text-align: center;		width: 233px;		margin: 0 auto;		}			.nTable p {		margin-left: 15px;		margin-top: 15px;		margin-right: 15px;		margin-bottom: 15px;		text-align: center;		text-indent: 0px;		font-family: Calibri;		line-height: 110%;		font-size: 90%;		color: #663300;		font-weight: bold;		}		.nTable .pict {		margin-left: 2px;		margin-top: 2px;		margin-right: 2px;		margin-bottom: 2px;		}/* Конец стили для таблицы с 3-мя колонками*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);#divmainmenu {	width: 822px; /* Ширина слоя в пикселах */	margin: 0 auto; /* Отступ слева и справа */	background-color: #FF0004;	height: 51px;	background-image:url(pic/menupodl.gif)	}	#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button {  margin: 0 auto;  padding: 0;  border: 0;  list-style: none;  line-height: 1;  display: block;  position: relative;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}#cssmenu:after,#cssmenu > ul:after {  content: '.';  display: block;  clear: both;  visibility: hidden;  line-height: 0;  height: 0;}#cssmenu #menu-button {  display: none;}#cssmenu {  width: 770px;  font-family: 'Open Sans', Helvetica, sans-serif;  background: #663300;  background: -moz-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #854200), color-stop(100%, #3d1f00));  background: -webkit-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -o-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: -ms-linear-gradient(top, #854200 0%, #3d1f00 100%);  background: linear-gradient(to bottom, #854200 0%, #3d1f00 100%);}#cssmenu > ul {  background: url('pic/bg.png');  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);}#cssmenu > ul > li {  float: left;}#cssmenu > ul > li > a {  padding: 18px 25px 21px 25px;  border-right: 1px solid rgba(80, 80, 80, 0.12);  text-decoration: none;  font-size: 12px;  font-weight: 700;  color: #fabe55;  text-transform: uppercase;  letter-spacing: 1px;}#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a {  color: #ffe7c9;  background: #572b00;  background: rgba(0, 0, 0, 0.1);}#cssmenu > ul > li.has-sub > a {  padding-right: 45px;}#cssmenu > ul > li.has-sub > a::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 6px solid transparent;  border-top-color: #fabe55;  right: 17px;  top: 21.5px;}#cssmenu > ul > li.has-sub.active > a::after,#cssmenu > ul > li.has-sub:hover > a {  border-top-color: #ffe7c9;}#cssmenu ul ul {  position: absolute;  left: -9999px;  top: 60px;  padding-top: 6px;  font-size: 13px;  opacity: 0;  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;  -o-transition: top 0.2s ease, opacity 0.2s ease-in;  transition: top 0.2s ease, opacity 0.2s ease-in;}#cssmenu > ul > li > ul::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 5px solid transparent;  border-bottom-color: #663300;  top: -4px;  left: 20px;}#cssmenu ul ul ul::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 5px solid transparent;  border-right-color: #663300;  top: 11px;  left: -4px;}#cssmenu > ul > li > ul {  top: 120px;}#cssmenu > ul > li:hover > ul {  top: 51px;  left: 0;  opacity: 1;}#cssmenu ul ul ul {  padding-top: 0;  padding-left: 6px;}#cssmenu ul ul > li:hover > ul {  left: 180px;  top: 0;  opacity: 1;}#cssmenu ul ul li a {  text-decoration: none;  font-weight: 400;  padding: 11px 25px;  width: 180px;  color: #fabe55;  background: #663300;  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {  color: #ffe7c9;}#cssmenu ul ul li:first-child > a {  border-top-left-radius: 3px;  border-top-right-radius: 3px;}#cssmenu ul ul li:last-child > a {  border-bottom-left-radius: 3px;  border-bottom-right-radius: 3px;}#cssmenu > ul > li > ul::after {  position: absolute;  display: block;}#cssmenu ul ul li.has-sub > a::after {  content: '';  position: absolute;  width: 0;  height: 0;  border: 4px solid transparent;  border-left-color: #fabe55;  right: 17px;  top: 14px;}#cssmenu ul ul li.has-sub.active > a::after,#cssmenu ul ul li.has-sub:hover > a::after {  border-left-color: #ffe7c9;}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {  #cssmenu {    background: #663300;  }  #cssmenu > ul {    display: none;  }  #cssmenu > ul.open {    display: block;    border-top: 1px solid rgba(0, 0, 0, 0.1);  }  #cssmenu > ul > li {    float: none;  }  #cssmenu > ul > li > a {    padding: 18px 25px 18px 25px;    border-right: 0;  }  #cssmenu > ul > li:hover > a,  #cssmenu > ul > li.active > a {	background: rgba(0, 0, 0, 0.1);	;  }  #cssmenu #menu-button {    display: block;    text-decoration: none;    font-size: 13px;    font-weight: 700;    color: #fabe55;    padding: 18px 25px 18px 25px;    text-transform: uppercase;    letter-spacing: 1px;    background: url('bg.png');    cursor: pointer;  }  #cssmenu ul ul,  #cssmenu ul li:hover > ul,  #cssmenu > ul > li > ul,  #cssmenu ul ul ul,  #cssmenu ul ul li:hover > ul {    left: 0;    top: auto;    opacity: 1;    width: 100%;    padding: 0;    position: relative;  }  #cssmenu ul ul li {    width: 100%;  }  #cssmenu ul ul li a {    width: 100%;    box-shadow: none;    padding-left: 35px;  }  #cssmenu ul ul ul li a {    padding-left: 45px;  }  #cssmenu ul ul li:first-child > a,  #cssmenu ul ul li:last-child > a {    border-radius: 0;  }  #cssmenu #menu-button::after {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    border-bottom: 2px solid #fabe55;    right: 25px;    top: 18px;  }  #cssmenu #menu-button::before {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    right: 25px;    top: 28px;  }  #cssmenu > ul > li.has-sub > a::after,  #cssmenu ul ul li.has-sub > a::after {    display: none;  }}$('#cssmenu').prepend('<div id="menu-button">Menu</div>');	$('#cssmenu #menu-button').on('click', function(){		var menu = $(this).next('ul');		if (menu.hasClass('open')) {			menu.removeClass('open');		}		else {			menu.addClass('open');		}	}); </style></head> <body><div id="main"><div id="logo">  <img src="pic/LogoNew.png" width="567" height="145" alt=""/> </div>  <div id='divmainmenu'><div id='cssmenu'>  <ul>  <li><a href='#'><span>О нас</span></a></li>   <li class='has-sub'><a href='#'><span>Гражданам</span></a>      <ul>         <li><a href='#'><span>Уголовное дела</span></a></li>         <li><a href='#'><span>Семейные споры</span></a></li>         <li><a href='#'><span>Трудовые споры</span></a></li>         <li><a href='#'><span>Наследование</span></a></li>         <li><a href='#'><span>Расторжение брака</span></a></li>         <li><a href='#'><span>Получение гражданства</span></a></li>         <li><a href='#'><span>Защита прав потребителей</span></a></li>         <li class='last'><a href='#'><span>Освобождение от прохождения военной службы</span></a></li>      </ul>   </li>   <li class='has-sub'><a href='#'><span>Юридическим лицам</span></a>      <ul>         <li><a href='#'><span>Арбитражные споры</span></a></li>         <li><a href='#'><span>Арбитражные споры в административной сфере</span></a></li>         <li class='last'><a href='#'><span>Споры по результатам государственных закупок</span></a></li>      </ul>   </li>   <li class='active has-sub'><a href='index.html'><span>Регистрация</span></a>      <ul>         <li><a href='#'><span>ООО</span></a></li>         <li><a href='#'><span>ОАО</span></a></li>         <li><a href='#'><span>ЗАО</span></a></li>         <li><a href='#'><span>ИП</span></a></li>         <li><a href='#'><span>Некоммерческих организаций</span></a></li>         <li><a href='#'><span>ТСЖ</span></a></li>         <li class='last'><a href='#'><span>Внесение изменений в устав</span></a></li>      </ul>   </li>   <li class='last'><a href='#'><span>Контакты</span></a></li></ul></div></div> <div id=soderg><p class="ornopen">  <img src="Ornament/YzOpen.png" width="400" height="50" alt=""/></p>    <p class="ornopen">    <img src="Ornament/YzClose.png" width="400" height="50" alt=""/> </p></div></div>	</body></html>

[wh1tegray]

Ещё раз утро Я правильно понял, что при сужении экрана меню должно оставаться в том же виде? Если да, то уберите вот этот кусок, который отвечает за изменение стилей вашего меню при изменении разрешения экрана (ширины окна)

@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {  #cssmenu {    background: #663300;  }  #cssmenu > ul {    display: none;  }  #cssmenu > ul.open {    display: block;    border-top: 1px solid rgba(0, 0, 0, 0.1);  }  #cssmenu > ul > li {    float: none;  }  #cssmenu > ul > li > a {    padding: 18px 25px 18px 25px;    border-right: 0;  }  #cssmenu > ul > li:hover > a,  #cssmenu > ul > li.active > a {    background: rgba(0, 0, 0, 0.1);    ;  }  #cssmenu #menu-button {    display: block;    text-decoration: none;    font-size: 13px;    font-weight: 700;    color: #fabe55;    padding: 18px 25px 18px 25px;    text-transform: uppercase;    letter-spacing: 1px;    background: url('bg.png');    cursor: pointer;  }  #cssmenu ul ul,  #cssmenu ul li:hover > ul,  #cssmenu > ul > li > ul,  #cssmenu ul ul ul,  #cssmenu ul ul li:hover > ul {    left: 0;    top: auto;    opacity: 1;    width: 100%;    padding: 0;    position: relative;  }  #cssmenu ul ul li {    width: 100%;  }  #cssmenu ul ul li a {    width: 100%;    box-shadow: none;    padding-left: 35px;  }  #cssmenu ul ul ul li a {    padding-left: 45px;  }  #cssmenu ul ul li:first-child > a,  #cssmenu ul ul li:last-child > a {    border-radius: 0;  }  #cssmenu #menu-button::after {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    border-bottom: 2px solid #fabe55;    right: 25px;    top: 18px;  }  #cssmenu #menu-button::before {    display: block;    content: '';    position: absolute;    height: 3px;    width: 22px;    border-top: 2px solid #fabe55;    right: 25px;    top: 28px;  }  #cssmenu > ul > li.has-sub > a::after,  #cssmenu ul ul li.has-sub > a::after {    display: none;  }}

если нужно что-то другое, уточните.

 

ЗЫ: кстати этот кусок можно не убирать, а просто изменить стили, чтобы меню, например уменьшалось, уменьшались шрифты и прочее... либо, чтобы меню делалось гармошкой.. для мобильных устройств... но не думаю, что вы преследовали именно эту цель.

[Orbos_2000]

если нужно что-то другое, уточните.   ЗЫ: кстати этот кусок можно не убирать, а просто изменить стили, чтобы меню, например уменьшалось, уменьшались шрифты и прочее... либо, чтобы меню делалось гармошкой.. для мобильных устройств... но не думаю, что вы преследовали именно эту цель.

 

 

Спасибо за ответ  

 

 

 

правильно понял, что при сужении экрана меню должно оставаться в том же виде?

 

 

Дa, точно так. Я убрал кусок кода, который вы показали, но все по-прежнему, как на первом рисунке. 

На другом мониторе, с более низким разрешением все нормально...

Edited June 5, 2014 by Orbos_2000

[Orbos_2000]

С переносом текста удалось решить проблему уменьшением шрифта, но появилась новая проблема, при сужении окна браузера, меню просто исчезает, что можно сделать (кроме бочки)? Пример

Да, и еще вопрос, возможно ли засунуть это меню в отдельный модуль или файл, чтобы каждый раз не повторять его в коде каждой html странички?