在浮动导航栏中调整徽标大小
Posted
技术标签:
【中文标题】在浮动导航栏中调整徽标大小【英文标题】:Resizing logo in floating navigation bar 【发布时间】:2014-02-23 02:54:05 【问题描述】:我有一个位于屏幕顶部的导航栏。我必须首先说,我知道像这样的导航栏在移动设备上可能会很尴尬,我刚刚从我的代码中删除了媒体查询,因为它不会影响它们。
我的问题是,如果用户的屏幕对于移动版来说太大,但又太小而无法容纳整个导航栏,那么公司徽标就会缩进导航栏下方以及下方元素下方。我希望徽标自动调整大小,但我还不能做到这一点。我尝试为徽标链接设置自动宽度,并且还弄乱了其他标签,但仍然没有运气。菜单栏上的链接数量也可以变化,所以目前有 5 个元素,但最多可以有 7 个。我需要这种大小变化来影响徽标。
有人告诉我,徽标需要与包装器相关,但 NavBar div 的大小会随着窗口一起缩小。
直播链接:http://rental.joshblease.co.uk/stack.php小提琴 http://jsfiddle.net/dZVyZ/
截图:
在屏幕上 > 900px 宽
在
必填结果
最后一张图片有一个较小的标志,当宽度太小时会缩小
HTML:
<div id="MainWrapper">
<div id="NavBar">
<ul>
<li class="Down DownBlue"><a href="/index/">Home</a></li>
<li class="Green"><a href="/Property/">View</a></li>
<li class="Pink"><a href="/About/">About Us</a></li>
<li class="Purple"><a href="/Josh/">Josh Blease</a></li>
<li class="Orange"><a href="/Contact/">Contact</a></li>
</ul>
<a href="/index/"><img id="NavLogo" src="/Images/Logo.png" /></a>
</div>
<div class="Clear"></div>
</div>
CSS:
#MainWrapper
max-width: 900px;
width: 100%;
margin: 0 auto 0 auto;
.Clear
clear: both;
#NavBar
overflow: hidden;
display: block;
position: fixed;
width: inherit;
max-width: 900px;
z-index: 999;
height:70px;
background: url(../Images/NavBg.png);
padding-left: 10px;
#NavBar ul
list-style: none;
#NavBar li
float: left;
padding: 20px 0 10px;
margin-right: 10px;
#NavBar li a
padding: 30px 10px 10px;
background-color: #CBCBCB;
color: #000;
font-size: 17px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottom-right: 5px;
-moz-border-radius-bottom-left: 5px;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
-ms-transition: background 300ms ease-in-out;
-o-transition: background 300ms ease-in-out;
#NavBar .Down, .JavaOff #NavBar li:hover
padding-top: 30px;
#NavLogo
float: right;
height: 60px;
padding: 5px 15px;
【问题讨论】:
您是否在徽标上使用了相对宽度?尝试例如宽度:15%;和高度:自动;。你有一个小提琴或真实的网页来查看你的问题吗? 既然你已经在使用媒体查询了,是不是不能再为这个尺寸添加一个? @MichaB - 看看这里rental.joshblease.co.uk/stack.php我现在就做一个小提琴 @badAdviceGuy 我会,但列表的宽度可以改变的事实可能会使它变得无用。它由像 wordpress 这样的管理面板控制,但自定义构建,因此客户端可能有更多导航项。 标识应该相对于其容器的宽度,并用min-width
来限制它。容器的宽度应该相对于导航栏的宽度,可能是“最大宽度”,具体取决于您的需要。
【参考方案1】:
检查这个小提琴:http://jsfiddle.net/Diesel9Design/dZVyZ/1/
我给了 UL 一个固定的大小,让它向左浮动:
#NavBar ul
list-style: none outside none;
width:500px;
float: left;
然后我将徽标包裹在一个 div 中,并为其留出 500 像素的边距。这允许 div 找出可用的剩余大小。然后我将徽标宽度设置为 100%,BAM 会根据剩余空间自行调整大小。
<div class="logoWrap">
<a href="/index/"><img id="NavLogo" src="http://rental.joshblease.co.uk/images/Logo.png" /></a>
</div>
.logoWrap
margin-left:500px;
padding:10px 0 0;
#NavLogo
width:100%;
【讨论】:
【参考方案2】:最简单的解决方案是#Navlogo 中的 css calc 函数,如下所示;用同样的方法调整高度;所以它看起来不会被拉伸或挤压。
#NavLogo
float: right;
height: 60px;
padding: 5px;
width: calc(100% - 500px);
但如果你问我,我宁愿使用 javascript 或 jQuery 以获得更好的控制。另外,我也不喜欢方向;最好将<ul>
放在单独的<div>
中,而将图像放在不同的<div>
中。希望这对现在有所帮助。
【讨论】:
【参考方案3】:就像你在问题中写的:
有人告诉我,徽标需要与包装器相关,但是 NavBar div 与窗口一起缩小。
您需要定义您愿意为徽标元素提供多少空间。由于您需要响应式解决方案,因此可以按百分比定义。
我建议将导航的大小限制在 70% 左右。您还可以添加最小宽度:;以防止列表项中断。看起来媒体查询生效太晚了,因为导航的一些列表项变得太短了。
你的问题。我添加了一些 CSS,希望能满足您的需求:
#NavBar ul
margin:0;
padding: 0;
float: left;
width: 70%;
#NavBar ul + a
display: block;
margin-left: 70%;
text-align: right;
width: 30%;
#NavLogo
display: inline-block;
margin-top: 10px;
max-width: 100%;
height: auto;
测试小提琴:http://fiddle.jshell.net/p28HE/
编辑:您还可以从#NavLogo
中删除float.right
使用此解决方案,徽标最多将占据屏幕宽度的 30%。这可以通过 css 更改并覆盖宽度媒体查询以获得更好的移动视图。如果此解决方案对您有用或我可能遗漏了什么,请发表评论。
【讨论】:
以上是关于在浮动导航栏中调整徽标大小的主要内容,如果未能解决你的问题,请参考以下文章