меню не появляется в Chrome и в Opera, а в Mozille все пордядке..Помогите пожалуста, пытался создат вот такой http://jsfiddle.net/jPFgS/17/ круглинкий дизайн, (я совсем новичок в этом,) так вот, в вверху 3 меню, средная при "hover" появлается, а вот те другие нет, в mozilla все работает, а вот в Chrome и в Opera нет, как можно решить эту проблему?.прошу знаюшим помочь мне..извенитье за плохой русский, сам я не русский..
Меню не появляется в Chrome и в Opera
- Автор темы sarhov
- Дата начала
- Статус
tigra60
Спасатель
- Регистрация
- 10.12.2009
- Сообщения
- 1 990
Проблема в том, что ссылки menu1 и menu2 перекрываются блоком content-wrapper. FireFox перекрывает по закругленному бордеру, поэтому все и работает. А остальные браузеры перекрывают по изначальному размеру этого блока, без закруглений.
Влет проблему решить не удалось.
Могу посоветовать попробовать прилепить поверх menu1 и menu2 прозрачные прямоугольники размером примерно 104 х 12, у которых z-index будет равен 3 (поверх content-wrapper), и меню должно выезжать при наведении на эти прямоугольники.
Влет проблему решить не удалось.
Могу посоветовать попробовать прилепить поверх menu1 и menu2 прозрачные прямоугольники размером примерно 104 х 12, у которых z-index будет равен 3 (поверх content-wrapper), и меню должно выезжать при наведении на эти прямоугольники.
спасибо за ответ!...сейчас попробуюПроблема в том, что ссылки menu1 и menu2 перекрываются блоком content-wrapper. FireFox перекрывает по закругленному бордеру, поэтому все и работает. А остальные браузеры перекрывают по изначальному размеру этого блока, без закруглений.
Влет проблему решить не удалось.
Могу посоветовать попробовать прилепить поверх menu1 и menu2 прозрачные прямоугольники размером примерно 104 х 12, у которых z-index будет равен 3 (поверх content-wrapper), и меню должно выезжать при наведении на эти прямоугольники.
не получилось, можеть я что то не так сделаль? скажите пожалуста правилна ли я сделаль...ширина 104 пиксел, а высота 12 пиксел?..поставить внтутры div- а меню ?Проблема в том, что ссылки menu1 и menu2 перекрываются блоком content-wrapper. FireFox перекрывает по закругленному бордеру, поэтому все и работает. А остальные браузеры перекрывают по изначальному размеру этого блока, без закруглений.
Влет проблему решить не удалось.
Могу посоветовать попробовать прилепить поверх menu1 и menu2 прозрачные прямоугольники размером примерно 104 х 12, у которых z-index будет равен 3 (поверх content-wrapper), и меню должно выезжать при наведении на эти прямоугольники.
div пояавился, но при "hover "див с меню не поднялся, что я делаю не так, может "hover" не правилно поставиль?..
это блок
.over{
width:104px;
height:12px;
position:relative;
z-index:3;
background:#ff3;
}
а это ховер
.over:hover .menu{
top:208px;
box-shadow: 0 0 100px 30px #B0F265,0 0 50px 30px #0F080F inset ;
tigra60
Спасатель
- Регистрация
- 10.12.2009
- Сообщения
- 1 990
Решение вашей проблемы в нижеследующем примере.
Идея заключается в том, что сами ссылки прозрачные и расположены поверх блока с большим кругом. А изображение ссылок - под ним.
Что будет непонятно, спрашивайте.
Идея заключается в том, что сами ссылки прозрачные и расположены поверх блока с большим кругом. А изображение ссылок - под ним.
Что будет непонятно, спрашивайте.
Код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>rounded design</title>
<style>
* {margin:0; padding:0}
body {background:black; font-family:Verdana, sans-serif}
.wrapper {
width:1000px;
margin:0 auto;
}
header {height:50px}
nav {
text-align:center;
position:relative;
height:104px;
top:78px;
/* do not set z-index!!! */
}
section {
width:1000px;
height:1000px;
border-radius:50%;
background:#33FFFF;
position:relative;
z-index:2;
}
/* menu items */
nav li {
list-style:none;
display:inline-block;
width:104px;
height:104px;
position:relative;
margin:0 50px;
}
/* invisible foreground elements */
nav a {
text-decoration:none;
display:block;
width:104px;
height:30px;
/* background:rgba(255,0,0,0.5); demo */
position:absolute;
z-index:3; /* must be greate then z-index for section */
top:0px;
}
nav a.item1 {
top:49px;
left:-12px;
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
}
nav a.item3 {
top:49px;
right:-12px;
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
-moz-transform:rotate(25deg);
}
nav a:hover {
top:-40px;
height:70px;
}
nav a.item1:hover {
top:12px;
left:-20px;
}
nav a.item3:hover {
top:12px;
right:-20px;
}
/* visible backgroud elements */
nav span {
display:block;
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
border-radius:50%;
border:solid 2px #fff;
color:#fff;
background:#300;
line-height:100px;
text-align:center;
transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-webkit-transition:all ease-out 0.5s;
}
nav span.label1 {
top:47px;
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
}
nav span.label3 {
top:47px;
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
-moz-transform:rotate(25deg);
}
nav a:hover+span {
top:-39px;
box-shadow: inset 0px 3px 20px 20px #ff0
}
nav a.item1:hover+span {
top:10px;
left:-13px;
}
nav a.item3:hover+span {
top:10px;
left:13px;
}
</style>
</head>
<body>
<div class="wrapper">
<header></header>
<nav>
<ul>
<li><a class="item1" href="#1"></a><span class="label1">First</span></li>
<li><a class="item2" href="#2"></a><span class="label2">Second</span></li>
<li><a class="item3" href="#3"></a><span class="label3">Third</span></li>
</ul>
</nav>
<section>
</section>
</div><!-- wrapper -->
</body>
</html>tigra60
Спасатель
- Регистрация
- 10.12.2009
- Сообщения
- 1 990
Да, кому интересно в песочек поиграться:
http://jsfiddle.net/awy3A/1/
http://jsfiddle.net/awy3A/1/
спасибо большое, все отлично работает..!!!
Volter9
defined('SURRENDER') or die(); // StarWars
- Регистрация
- 27.05.2012
- Сообщения
- 1 145
Здорово Тигра!
- Статус
