- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在将图像居中时遇到问题。地址是
http://burger-laden.de/preview/
如您所见,箭头移动的地方有一个菜单。我的问题是现在我需要箭头始终位于文本的中心。这里的代码:
样式:
.navigation .bottom {
font-weight: bold;
font-size:16px;
}
.lavaLampBottomStyle {
position: relative;
overflow: hidden;
height: 46px;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
background: url(../images/menu_top_arrow.png) no-repeat;
background-position: left 0px;
margin-top: 33px;
margin-left: 20px;
height: 46px;
width: auto;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
text-decoration: none;
color: white;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
position: relative;
overflow: hidden;
float: left;
margin: auto 0px;
}
这是html
<ul class="lavaLampBottomStyle" id="1">
<li><a href="#">Startseite</a></li>
<li class="current"><a href="#">Speisekarte</a></li>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
这里是 lavalamp js
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);
谢谢
最佳答案
我知道这已经晚了,但是您的网站实际上帮助我找到了它,我现在正在将它用于我正在开发的新投资组合网站。要实现“居中”外观,请更改以下内容。
.lavaLampBottomStyle li.back {
--- 背景:url(../images/menu_top_arrow.png) 不重复;
--- 背景位置:
left
center 0px;
--- 顶部边距:33px;
---
margin-left: 20px;
--- 高度:46px;
--- 宽度:自动;
--- z-index: 8;
--- position:absolute;
因为宽度设置为自动,所以 li 元素与它悬停的 li 的宽度相同,因此一个简单的居中背景位置就可以完成这项工作。
关于jquery - jquery lavalamp 菜单上的中心图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10777106/
嗨,我希望有人可以帮助我解决 jQuery lavalamp 问题。 我有以下内容- 使用 lavalamp 的菜单栏。- 单击菜单栏上的链接时加载内容的 div- 在我的内容 div 中,我有一些链
我使用了这个纯 CSS 制作的 LavaLamp 效果,我几乎对它很满意: HTML: ✿LoremIpsumConsectetur adipisicingSit amet CSS: ht
这个问题在这里已经有了答案: 关闭 13 年前。 Possible Duplicate: Trouble with jquery lavalamp 出于某种原因,无论我点击哪个链接,我的背景颜色都会
我正在尝试使用 jquery 的 lavalamp 插件并为其添加下拉功能。 下拉菜单和 lavalamp 效果在此代码上都可以正常工作,除了我的问题是下拉菜单扩展了 lavalamp 效果。 我确定
我正在为我的博客制作一个 tumblr 主题。我想在我的菜单中实现 lavalamp,但我尝试了很多不同的东西,但似乎无法让它工作。我不是 jquery 专家,所以非常感谢您的帮助!!! 我的博客是h
我相信你们中的许多人都知道 jQuery LavaLamp:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 我知
我有一个导航菜单,我想为其使用 lava lamp jQuery 插件。在这个 fiddle 示例中,熔岩灯插件完美运行: http://jsfiddle.net/tsLPT/3/ 但在我的菜单上:
我正在寻找 Lavalamp 菜单解决方案,并找到了这个小脚本。我不确定这是否是最好的,但看起来不错并且可以轻松修改。 但是它在控制台中包含一个错误,我不喜欢错误,因此我们将不胜感激。 Uncaugh
我遇到了一个问题,真的希望你们能帮忙。 http://ontwikkelomgeving.wijzijnblits.nl/primawonen/在这里您可以找到我当前正在创建的网站。 如您所见,自动滚
我在将图像居中时遇到问题。地址是 http://burger-laden.de/preview/ 如您所见,箭头移动的地方有一个菜单。我的问题是现在我需要箭头始终位于文本的中心。这里的代码: 样式:
我正在使用带有 lavalamp 功能 (spasticNav) 的全屏滑动网站(fss slider)作为导航栏。在每张幻灯片中,我都放置了相同的菜单,该菜单项的类别为“当前”。但是,lavalam
我一直在尝试从 Hitmo 网站重新创建“预算” slider : http://hitmo-studio.com/contact.html#budget-panel-container 但我无法让它
出于某种原因,无论我点击哪个链接,我的背景颜色都会回到最左边的链接。任何人都知道如何让它留在点击的链接上? CSS #lamp { float:left; margin:25px 0px 0px 90
我正在试用 jQuery Lavalamp menu我正在尝试改变它并同时了解它是如何工作的。事实是,我发现的所有示例基本上都由两张图片组成。 背景和左图。没问题,但我想创建一个包含三个图像的菜单。背
我正在开发一个 jQuery 函数来在我的导航栏上创建“lavalamp”效果。 目前,它以鼠标方式运行,除非您将鼠标悬停在某个元素(例如社区服务)上,然后将鼠标从导航栏移开。执行此操作时,#movi
我正在为水平菜单使用 LavaLamp 脚本 http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 事件或悬停的链接现
我在使用 jQuery 插件时遇到问题 LavaLamp ; 我关注了this教程,但没有任何效果。 有没有人用过这个插件可以告诉我我做错了什么this网站? 绿色菜单项应跟随鼠标指针。作为测试,我只
我已经为 LavaLamp 滑动菜单集成了代码,到目前为止效果很好(我遇到了一些问题,但能够通过阅读面板快速解决它们)但是有一件令人沮丧的事情妨碍了我。当您最初加载页面时,菜单悬停背景位于错误的位置,
亲爱的..我有一个问题。在 Firebug 展上: $("#menu ul.menu").lavaLamp 不是 menu.js 中的函数 悬停在菜单上不显示。我把这个问题显示出来:
Home About
我是一名优秀的程序员,十分优秀!