- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个 Bootstrap 导航:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$("#cssmenu").prepend("<div id='menu-line'></div>");
var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
$("#cssmenu > ul > li").each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
foundActive = true;
}
});
if (foundActive === false) {
activeElement = $("#cssmenu > ul > li").first();
}
defaultWidth = lineWidth = activeElement.width();
defaultPosition = linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
lineWidth = activeElement.width();
linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
},
function() {
menuLine.css("left", defaultPosition);
menuLine.css("width", defaultWidth);
});
});
});
})(jQuery);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
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 ol, ul {
float: right;}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: 'Open Sans', sans-serif;
line-height: 1;
background: #ffffff;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: #009ae1;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 20px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #009ae1;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
position: absolute;
top: 21px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
border-color: #009ae1;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
}
#cssmenu ul ul li a {
padding: 10px 20px;
width: 160px;
font-size: 12px;
background: #333333;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 13px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: "";
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color: #ffffff;
}
@media all and (max-width: 768px), 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 {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul,
#cssmenu.align-right ul ul {
text-align: left;
}
#cssmenu ul li,
#cssmenu ul ul li,
#cssmenu ul li:hover > ul > li {
width: 100%;
height: auto;
border-top: 1px solid rgba(120, 120, 120, 0.15);
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
}
#cssmenu > ul > li,
#cssmenu.align-center > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu ul ul li a {
padding: 20px 20px 20px 30px;
font-size: 12px;
color: #000000;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000000;
}
#cssmenu ul ul ul li a {
padding-left: 40px;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
right: auto;
width: 100%;
margin: 0;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
#menu-line {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 20px;
color: #000000;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
}
#cssmenu #menu-button::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 15px;
height: 2px;
background: #000000;
}
#cssmenu #menu-button::before {
content: '';
position: absolute;
top: 25px;
right: 20px;
display: block;
width: 15px;
height: 3px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 10;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.15);
height: 52px;
width: 52px;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: '';
position: absolute;
top: 21px;
left: 26px;
display: block;
width: 1px;
height: 11px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button::before {
content: '';
position: absolute;
left: 21px;
top: 26px;
display: block;
width: 11px;
height: 1px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button.submenu-opened:after {
display: none;
}
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!doctype html>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active has-sub'><a href='#'>Products</a>
<ul>
<li class='has-sub'><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
Bootstrap NAV MENU如您所见,我还想移动右侧的蓝色突出显示部分。
我认为这与 JavaScript 有关。你能帮帮我吗?
干杯
最佳答案
问题是您只能获得菜单元素相对于其父元素的位置 <ul>
(0).您应该将 ul 相对于文档的左侧位置添加到菜单项的位置,以将菜单行放置在事件项上方:
// left position of your ul
var ulPosition = $('#cssmenu > ul').position().left;
var linePosition = activeElement.position().left;
// add it to your item position
var defaultPosition = ulPosition + linePosition;
menuLine.css("width", lineWidth);
menuLine.css("left", defaultPosition);
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
lineWidth = activeElement.width();
linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
// same here
menuLine.css("left", linePosition + ulPosition);
},
....
在您的 js 末尾更改这些行,它将起作用。检查fiddle
提示:您可以进一步将此代码包装在函数中并使其更简洁,从而允许在 .resize()
上调用菜单行位置提高文档的效率和花哨性
关于javascript - Bootstrap 导航 float : right doesn't work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29572700/
我正在尝试将我的 xcode 应用程序存档到 Itunes,但我得到了 following errors : 1.) “配置文件不支持推送通知。” 2.) “配置文件不包含 aps-environme
我正在尝试为我们的组织构建一个 Web 应用程序,它将使用我们的 O365 进行身份验证。在尝试使用管理员帐户连接到域时,我遇到了这个错误,其中提到 admin..onmicrosoft.com(全局
当我尝试构建 MUAI 项目时,它给出错误“该项目不知道如何运行配置文件 sample.WinUI”。项目已构建但无法运行。我使用的是 Visual Studio 2022 Preview(17.0
当某项包含在列表中时,有一个查询要搜索,但当某项不在列表中时,则没有查询。 此查询查找在给定列表 cdiffnums 中没有 ContactNum 的 customer 对象。我该怎么做才能仅返回此列
我们有一个黑盒第三方 Java 程序,可以从某个位置获取输入文件并制作 PDF。每次输入时,它都会将 list 文件放在同一位置,这需要我们以受控方式提供文件。 list (或 .xen/.que)是
我看到这个has选择器,hasnt 选择器在哪里?我想查找不包含图像的表格。 最佳答案 类似$("table:not(:has(img))")? 关于jQuery: "Doesn' t 有“选择器?,
为什么?这让我发疯??? $(document).ready(function () { $('#slides1').bxSlider({ prev_
我是 kubernetes 的新手。 我无法使用 kubectl 进行部署,但我可以在 kubernetes 仪表板上看到所有部署。我该如何解决这个问题? user@master:~$ kubectl
这个问题已经有答案了: What do querySelectorAll and getElementsBy* methods return? (12 个回答) 已关闭 6 年前。 HTML JS
我有两个数组,一个包含字符串值,另一个包含整数值,尽管这可能很愚蠢,但我陷入了困境,我需要一点帮助,我想遍历两者,如果 arr1 包含 arr2 中不存在的项目,它将被推送到 newArray 这是我
我一直在尝试为我的网站安装一个 PHP 脚本,设置所有内容,通过脚本附带的 phpMyAdmin 导入 SQL 文件,但我面对的是一个空白页面,错误如下所示: File /home/user/publ
我正在努力将站点的服务器从 PHP 5.2.17 升级到 5.5,以使其在未来的升级中保持新鲜,并安装其他需要 PHP 5.4+ 的软件。 数据库有一个我正在测试的表,其中有许多列在初始 INSERT
我一直收到这个错误: Object doesn't support this property or method 每当我在 IE7 和 IE8 中运行我的代码时。这是它停止的代码: _renderU
我想使用正则表达式排除某些单词。 输入文本: aaa1234 cc bbb1234 c1234 cc dd aacc cccc ccadf cc 输出文本: aaa1234 bbb1234 c1234
我有一个名为 adjust_status 的存储函数和一个包含 status 列的表 users。 select adjust_status(status) as adjusted_status
我有一个表,其中有一列由插入前触发器填充,该列设置为 NOT NULL 并且没有DEFAULT VALUE。 当我执行 INSERT TABLE 而不传递此列时,我收到错误:1364 - Field
这个问题已经有答案了: Modify the value of each textfield based on original value using jQuery (3 个回答) 已关闭去年。 使
我正在阅读 this , 它说 @keyframes rules don't cascade, so animations never derive keyframes from more than
编辑:我解决了问题,请参阅答案中的链接。 我正在使用 XMLHttpRequest AJAX API 将来自不同网站的数据发送到我们在 PythonAnywhere 中的服务器。奇怪的事情发生了:根据
我已经阅读了 Linux 调用 dlopen() 和 dlsym() 的文档,它们分别打开一个动态库并在库中加载一个符号。 这些调用似乎等同于 Windows 的 LoadLibrary() 和 Ge
我是一名优秀的程序员,十分优秀!