Jump to content
  • 0

Разработка меню


bu3i28
 Share

Question

Еть код меню.

body { 
height: 20px;
margin : 0;
padding : 10px;
font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
behavior: url(csshover.htc);
background-color: #272727;
}

/* Горизонтальное меню */

div#menunav { ]
height: 200px;
width: 100%; /* задаем ширину для div */
float: left; /* добавляем список в div */
border-top: 4px solid #000000; /* рисуем линию поверх div */
border-bottom: 4px solid #000000; /* рисуем линию снизу div */
font-size: 16px; /* задаем размер шрифта */
background-color: #272727; /* фоновый цвет div */
padding: 0 0 0 0px; /* отступ ul от края контейнера */
z-index: 999;
border-radius: 16px 16px 0 0 ;
-moz-border-radius: 16px 16px 0 0;
-khtml-border-radius:16px 16px 0 0 ;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left; /* заставляет ul вместить все li */
border-left: 1px solid #000000; /* добавляет левую вертикальную черту к ul */
margin-left: 15px; /* IE удваивает заданное значение */
z-index: 999;
}
div#menunav li {
float: left; /* располагаем список по горизонтали */
position: relative; /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */
list-style-type: none; /* удаляем маркеры */
background-color: #FFA500; /* задаем фоновый цвет элементов меню */
border-right: 1px solid #000000; /* создаем разделительные линии между элементами li */
z-index: 999;
}

div#menunav li:first-child {
border-left: 1px solid #000000; /* первая вертикальная линия в меню */
}
div#menunav a {
display: block; /* пункты вложенного меню выделяются при наведении указателя */
text-decoration: none; /* удаляем подчеркивание ссылок */
padding: 0px 10px 0px 10px; /* создаем пространство с обеих сторон текста пункта меню */
color: #006699; /* задаем цвет шрифта */
}
div#menunav a:hover {
color: #272727;
}
div#menunav li:hover {
background-color: #ffffff; /* задает фон пунктов списка */
}

/* Раскрывающееся меню */

div#menunav ul li ul {
margin: 0px;
position: absolute; /* размещает выпадающий ul относительно родительского li */
left: -1px; /* выравнивает раскрывающееся меню */
width: 10em;
}
div#menunav ul li ul li {
width: 100%; /* элементы списка заполняют контейнер (ul) */
border-left: 1px solid #000000; /* три стороны каждого пункта раскрывающегося меню */
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
div#menunav ul li ul li:first-child {
border-top: 1px solid #000000; /* верхний край раскрывающегося меню */
}
body div#menunav ul li ul {
display: none;
}
div#menunav ul li:hover ul, div#menunav ul li ul:hover {
display: block;
}
* html div#menunav ul li ul { /* добавляет верхнюю границу раскрывающегося меню для IE*/
border-top: 1px solid #000000;
border-left: 0рх; /* устраняет наследование границ ul раскрывающимся меню */
}

/* Многоуровневое раскрывающееся меню */

body div#menunav ul li ul li ul {
visibility: hidden; /* идентично display: none */
top: -1px; /* выровнено по верхей границе пункта списка */
left: 10em;
}
div#menunav ul li ul li:hover ul {
visibility: visible; /* идентично display: block */
}
div#menunav ul li ul li:hover ul li ul {
visibility: hidden;
}
div#menunav ul li ul li ul li:hover ul {
visibility: visible;
}

Помогите понять что есть что, пытаюсь сделать закрглённые углы только у первого пункта меню в верхней троке, а в подменю надо нижние. но не могу разобратья как это реализовать.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

стили это хорошо, а где разметка?

<div id="menunav"> 
<ul>
<li><a href="http://beltravel.16mb.com/">Главная</a></li>
<li><a href="">Республика Беларусь</a>
<ul>
<li><a href="http://beltravel.16mb.com/brestobl/">Брестская область</a></li>
<li><a href="http://beltravel.16mb.com/vitobl/">Витебская область</a></li>
<li><a href="http://beltravel.16mb.com/gomobl/">Гомельская область</a></li>
<li><a href="http://beltravel.16mb.com/grobl/">Гродненская область</a></li>
<li><a href="http://beltravel.16mb.com/minobl/">Минская область</a></li>
<li><a href="http://beltravel.16mb.com/mogobl/">Могилёвская область</a></li>
</ul>
</li>
</ul>
</div>

Link to comment
Share on other sites

  • 0

border-top-left-radius:; /*Скругленный верхний левый угол*/
border-top-right-radius:; /*Скругленный верхний правый угол*/
border-bottom-left-radius:; /*Скругленный нижний левый угол*/
border-bottom-right-radius:; /*Скругленный нижний правый угол*/

/*или короткая запись*/

border-radius: 8px 0 0 8px; /*Скругленные углы, левый верхний и левый нижний*/

Link to comment
Share on other sites

  • 0


border-top-left-radius:; /*Скругленный верхний левый угол*/
border-top-right-radius:; /*Скругленный верхний правый угол*/
border-bottom-left-radius:; /*Скругленный нижний левый угол*/
border-bottom-right-radius:; /*Скругленный нижний правый угол*/

/*или короткая запись*/

border-radius: 8px 0 0 8px; /*Скругленные углы, левый верхний и левый нижний*/

Я знаю, это же я дописывал.

Мне нужно разобраться где какой элемент.

В итоге должно получится что-то типа этого:

VJUUKmR4.jpg

Link to comment
Share on other sites

  • 0

Честно сказать ваш CSS даже не смотрел. Лень.

А разобраться где какой элемент не сложно.

Для главного меню можно прописать в стили id="menunav" border-top-left-radius/border-top-right-radius

Для под меню можно присвоить к последнему <li> какой нибудь класс и ему уже задать нижнее скругление.

  • Like 1
Link to comment
Share on other sites

  • 0

Честно сказать ваш CSS даже не смотрел. Лень.

А разобраться где какой элемент не сложно.

Для главного меню можно прописать в стили id="menunav" border-top-left-radius/border-top-right-radius

Для под меню можно присвоить к последнему <li> какой нибудь класс и ему уже задать нижнее скругление.

Спасибо за идею)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy