После еще одного дня мозгового штурма я разобрался с этим и заставил меню работать безупречно в CHROME, MOZ и OPERA, хотя у него все еще есть некоторые проблемы в IE до 9 версий из-за поддержки CSS3, но сдвиг и позиция также работалив IE8 и ниже. Вы можете использовать PIE для поддержки его в IE8 и раньше, я думаю.
Так что я помещаю рабочие коды здесь.Найдите ( новый пример здесь ).
Проблема заключалась в том, что браузеру не удалось получить начальную позицию: слева от «currentitem», так как они еще не были определены в css, поэтому браузер выбрасывает значение после позиционирования currentitem, что в соответствии с вычислением браузером размещения самого элемента, а также потому, что его контейнер был определен как абсолютный, поэтому он продолжает вычислять позиции в качестве временного размещения элементов в окне / экране, которые отличаются от каждого браузера.
Это япроверил, когда я выбрасывал значения ширины и позиции для каждого «currentitem» с помощью оповещения, и они приходили по-разному от каждого браузера.Например, для блога "currentitem":
WIDTH POSITION
CHROME 73 337
MOZILLA 78 302.3833
OPERA 77 304
Когда я использую оповещение, оно сохраняет значение «currentitem» перед тем, как поместить его на экран, которое было вычислено согласно его родительскому абсолютному элементу «menutxtwrapper», который неожиданно прибываетХорошо.
Решение : В соответствии с приведенной выше теорией я решил сделать все элементы "li" и "currentitem" определенными как абсолютные и расположить их там, где мне было нужно.Это позволяет определить их левую позицию, доступную для CSS, поэтому, когда документ загружает левое значение для каждого элемента li & currentitem, доступного для расчета.
Для этого я добавил дополнительные детали в CSS, «id» для каждого «li» и поместил туда значение left & width.Так как я использовал "id" в "li", я изменил [id = "currentitem"] на [class = "current_item"].
Для скрипта menu.js есть небольшие изменения.Мы вычисляем newWidth как [newWidth = $ el.width ();] который был до [newWidth = $ el.parent (). width ();], поскольку теперь мы рассчитываем не новую ширину в соответствии с родителем, а сам элемент "li".
НОВЫЕ КОДЫ НИЖЕ:
НОВЫЙ HTML:
<body>
<div id="menu">
<div id="menutxtwrapper">
<ul id="menutxtlist_ul">
<li id="about"><a href="#"> ABOUT </a></li>
<img class="hr_divider" id="v1" src="menu-1px-divider.png"/>
<li id="service"><a href="portfolio.html"> SERVICES </a></li>
<img class="hr_divider" id="v2" src="menu-1px-divider.png"/>
<li class="current_item" id="profile"> PROFILE </li>
<img class="hr_divider" id="v3" src="menu-1px-divider.png"/>
<li id="blog"><a href="#"> BLOGS </a></li>
<img class="hr_divider" id="v4" src="menu-1px-divider.png"/>
<li id="themes"><a href="themes.html"> THEMES </a></li>
</ul>
</div>
</div>
</body>
НОВЫЙ CSS:
body { background:#333333; }
#slider_box {
background:url(hover-menu.png);
height:39px;
position:absolute;
top:-10px;
left:0px;
z-index:3;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-bottom-left-radius: 10px 10px;
-moz-border-bottom-right-radius: 10px 10px; }
#menu {
background:url(menu-base.png);
width:525px;
height:55px;
position:absolute;
top:60px;
right: 382px;
z-index:2;
}
#menutxtwrapper {
position:absolute;
width:525px;
height:55px;
left:25px;
top:10px;
margin: 0 auto;
z-index:5;
}
#menutxtlist_ul {
position:absolute;
height:55px;
top: 0px;
left: 0px;
margin:0px;
padding:0px;
list-style:none;
z-index:6;
}
#menutxtlist_ul li {
position:absolute;
font-family:'Cuprum', arial, serif;
font-size:16px;
color: #666666;
letter-spacing:2px;
display:inline;
z-index:6;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.4s ease-in;
-o-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out; }
#menutxtlist_ul li a {
color:#666666;
list-style:none;
text-decoration: none;
text-transform: uppercase;
z-index:6;
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out; }
#menutxtlist_ul li a:hover {
color: #333333; }
.currentitem{
position:absolute;
display:inline;
}
.currentitem:hover{ cursor:pointer; }
.hr_divider {
position:absolute;
margin:auto 10px;
vertical-align:middle;
border:none;
text-decoration:none;
}
#v1 {
top: 0px;
left: 66px;
}
#v2 {
top: 0px;
left: 183px;
}
#v3 {
top: 0px;
left: 287px;
}
#v4 {
top: 0px;
left: 372px;
}
#about{
width:60px;
height:20px;
position:absolute;
left: 5px;
top: 8px;
text-align:center;
}
#blog{
width:60px;
height:20px;
position:absolute;
left: 311px;
top: 9px;
text-align:center;
}
#service {
width:90px;
height:20px;
position:absolute;
left: 91px;
top: 9px;
text-align:center;
}
#profile{
width:80px;
height:20px;
position:absolute;
left: 207px;
top: 9px;
text-align:center;
}
#themes{
width:70px;
height:20px;
position:absolute;
left: 395px;
top: 9px;
text-align:center;
}
НОВЫЙ СКРИПТ:
$(document).ready(function(){
var $el, leftPos, newWidth,
$menu = $("#menutxtwrapper");
//alert("current item width is:" + $(".current_item").width());
//alert("current item Left is:" + $(".current_item").position().left);
$menu.append("<div id='slider_box'></div>");
var $sb = $("#slider_box");
$sb.width($(".current_item").width());
$sb.css("left", $(".current_item").position().left);
$sb.data("origLeft", $sb.position().left);
$sb.data("origWidth", $sb.width());
$("#menutxtlist_ul li").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.width();
$("#menutxtlist_ul li").css({
color: "#ff0000"});
$sb.stop().animate({
left: leftPos,
width: newWidth
},{duration:600,easing:"easeOutExpo"});
}, function() {
$sb.stop().animate({
left: $sb.data("origLeft"),
width: $sb.data("origWidth")
},{duration:1000,easing:"easeOutExpo"});
$("#menutxtlist_ul li").css({
color: "#666666"});
});
});
Найдите ( новый пример здесь ).
Хорошая вещь в том, что #menu является абсолютным, если у вас есть редактор WYSWYG, просто перемещайте и размещайте меню в любом месте, где вы хотите..