元素宽度以匹配其他元素的水平位置

假设我们有一个包含元素的导航div。在导航div 下方有一些栏，必须扩展到与其中一个导航元素匹配的宽度(在本例中为第三个(。

<div id="main_navigator">
<div id="main_navigator_upper">          
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>

从此代码中，main_navigator_progressiondiv 必须扩展其宽度以使其与BTN 3匹配。

你可以在这里看到这个概念。

我写了一个简单的JS代码，但它似乎并不整洁，并不总是有效：

function initializeProgressorPos() {
document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});

有没有办法创建这样一个即使在浏览器缩放时也能工作的函数？我的代码可能有什么问题？这有可能用纯 css 完成吗？

当您将元素浮动到右侧时，首先您必须获取文档的宽度，然后从该数量中排除从文档左侧到元素右侧的宽度：

function initializeProgressorPos() {
var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
$("#main_navigator_progression").css({"width": elementRight + "px"});
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});

body {
	margin: 0;
	overflow-y: scroll;
}
#main_navigator {
	position: fixed;
	background-color: black;
	width: 100%;
}
#main_navigator_upper {
	position: relative;
	display: flex;
	flex-direction: row;
}
#main_navigator_logo {
	width: 416px;
	height: 120px;
	background-color: white;
}
#main_navigator_r1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 0;
	padding-right: 5%;
	text-align: center;
	margin-top: 0px;
	height: 98px;
	list-style-type: none;
}
#main_navigator_r1 li {
	flex-grow: 1;
	flex-shrink: 1;
	/* flex-basis: 0; */
flex-basis: auto; /* new */
}
#main_navigator_l1 {
	flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
	color: white;
	display: block;
	height: 100%;
	font-family: "nexa_bold";
	font-size: 0.9em;
	text-decoration: none;
}
#main_navigator_s1 {
	display: inline-block;
	width: 2px;
	height: 35px;
	background-color: #B28039;
}
#main_navigator_regbox {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#main_navigator_regbox li {
	display: inline-block;
	flex-grow: 0.1;
	flex-shrink: 0.1;
}
#regbox_signin {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	color: #B28039;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#regbox_signup {
	display: block;
	white-space: nowrap;
	text-decoration: none;
	color: white;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
	display: inline-block;
	width: 1.4px;
	height: 13.5px;
	background-color: white;
}
#main_navigator_bottom {
	background-color: black;
	height: 24px;
}
#main_navigator_progression {
	position: relative;
	background-color: #B28039;
	height: 100%;
	width: 416px;
	float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<body>
		<div id="main_navigator">
<div id="main_navigator_upper">          
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
			          </div>
</div>
	</body>
</html>

这是一个概念证明。

您可以在导航菜单上使用自定义HTML5 data-*属性和::after伪元素(以及少量 javascript(的组合来指示您最近选择的菜单项。

尽管有javascript的痕迹，但大部分工作都是使用CSS完成的。

工作示例：

var menu = document.querySelector('nav ul');
var menuItems = [... menu.getElementsByTagName('li')];
function selectMenu() {
menu.dataset.selectedMenu = (menuItems.indexOf(this) + 1);
}
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', selectMenu, false);
}

nav ul {
display: flex;
position: relative;
margin: 0;
padding: 0;
}
nav li {
flex: 0 0 60px;
padding: 12px 12px 24px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
list-style-type: none;
cursor: pointer;
}
nav ul::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
background-color: rgba(0, 0, 0, 0.5);
transition: width 0.6s linear;
}
nav ul[data-selected-menu="1"]::after {
width: 80px;
}
nav ul[data-selected-menu="2"]::after {
width: 160px;
}
nav ul[data-selected-menu="3"]::after {
width: 240px;
}
nav ul[data-selected-menu="4"]::after {
width: 320px;
}
nav ul[data-selected-menu="5"]::after {
width: 400px;
}

<nav>
<ul data-selected-menu="1">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>

相关内容

最新更新

热门标签：