在菜单中动态居中徽标
Center logo dynamically in menu
我希望徽标保留在导航中菜单项的中间,它看起来像 "splits" 导航中的徽标 this example。重要的是,徽标也应位于页面中间。所以菜单项围绕着它们,但徽标是 "fixed"。
我用 javascript 动态添加一个分隔符 div 到菜单项的中间(当有六个项目时,分隔符保留在第三个之后)以创建我上面描述的效果。
.seperator {
display: inline-block;
height: 10px;
margin-left: 69px;
margin-right: 206px;
width: 10px;
}
但是当编辑器在导航中添加新的菜单项或重命名项目(CMS)时,徽标不再居中。对于固定边距,它不起作用,但我不知道如何动态计算宽度或边距大小。我想通过 javascript 添加值。我认为这是唯一可行的方法。
所以我需要一个脚本或一个有用的想法来做到这一点。
响应式解决方案,裸 HTML & CSS:
<div class="navBar">
<table class="menu">
<tr>
<td class="left">
<table class="nested" >
<tr>
<td><a href="#">first</a></td>
<td><a href="#">second</a></td>
</tr>
</table>
</td>
<td class="logo">
<a href="#">
<img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
</a>
</td>
<td class="right">
<table class="nested" >
<tr>
<td><a href="#">third</a></td>
<td><a href="#">fourth</a></td>
<td><a href="#">fifth</a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.navBar {
width: 100%;
margin: 0 auto;
}
.menu {
width: 100%;
}
.menu td {
text-align: center;
}
.menu .logo {
width: 22%;
}
.menu .logo img {
width: 200px;
max-width: 100%;
}
.left, .right {
width: 39%;
}
.nested {
width: 100%;
}
.nested td {
text-align: center;
}
</style>
flex box 可能适用于此。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
好的,我尝试了一些方法,但我不想使用两个导航,但我做到了:
<div class="inner">
<div class="desktop_navi">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
<div class="logo"><a href="#"><img width="281" height="280" src=""></a></div>
<div class="desktop_navi">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
</div>
那是我的新 HTML- 标记。这里我使用的样式:
.inner {
display: table;
width: 100%;
}
.inner .desktop_navi,.logo {
display: table-cell;
}
.inner .desktop_navi {
text-align: left;
}
.header .inner .desktop_navi:first-child {
text-align: right;
}
这不是最佳解决方案,但它有效,响应迅速,并且在旧版浏览器中没有问题。如果有人通过单一导航找到真正好的解决方案,请告诉我!
我希望徽标保留在导航中菜单项的中间,它看起来像 "splits" 导航中的徽标 this example。重要的是,徽标也应位于页面中间。所以菜单项围绕着它们,但徽标是 "fixed"。
我用 javascript 动态添加一个分隔符 div 到菜单项的中间(当有六个项目时,分隔符保留在第三个之后)以创建我上面描述的效果。
.seperator {
display: inline-block;
height: 10px;
margin-left: 69px;
margin-right: 206px;
width: 10px;
}
但是当编辑器在导航中添加新的菜单项或重命名项目(CMS)时,徽标不再居中。对于固定边距,它不起作用,但我不知道如何动态计算宽度或边距大小。我想通过 javascript 添加值。我认为这是唯一可行的方法。
所以我需要一个脚本或一个有用的想法来做到这一点。
响应式解决方案,裸 HTML & CSS:
<div class="navBar">
<table class="menu">
<tr>
<td class="left">
<table class="nested" >
<tr>
<td><a href="#">first</a></td>
<td><a href="#">second</a></td>
</tr>
</table>
</td>
<td class="logo">
<a href="#">
<img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
</a>
</td>
<td class="right">
<table class="nested" >
<tr>
<td><a href="#">third</a></td>
<td><a href="#">fourth</a></td>
<td><a href="#">fifth</a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.navBar {
width: 100%;
margin: 0 auto;
}
.menu {
width: 100%;
}
.menu td {
text-align: center;
}
.menu .logo {
width: 22%;
}
.menu .logo img {
width: 200px;
max-width: 100%;
}
.left, .right {
width: 39%;
}
.nested {
width: 100%;
}
.nested td {
text-align: center;
}
</style>
flex box 可能适用于此。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
好的,我尝试了一些方法,但我不想使用两个导航,但我做到了:
<div class="inner">
<div class="desktop_navi">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
<div class="logo"><a href="#"><img width="281" height="280" src=""></a></div>
<div class="desktop_navi">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
</div>
那是我的新 HTML- 标记。这里我使用的样式:
.inner {
display: table;
width: 100%;
}
.inner .desktop_navi,.logo {
display: table-cell;
}
.inner .desktop_navi {
text-align: left;
}
.header .inner .desktop_navi:first-child {
text-align: right;
}
这不是最佳解决方案,但它有效,响应迅速,并且在旧版浏览器中没有问题。如果有人通过单一导航找到真正好的解决方案,请告诉我!