响应式Web导航菜单（带图像）

我正在尝试创建一个响应式网站。我过去曾使用过twitter引导，也看过基础，但是没有一个导航菜单按照我的意愿行事。响应式Web导航菜单（带图像）

我期待着看有没有人可以推荐一个框架或模板来获得我想要的行为。

基本上 - 这是怎么会出现在浏览器最大化我的菜单：

full web page navigation menu

点击旁边的链接彩色矩形也将导航到所需的页面。

在移动，我想该页面显示如下： enter image description here

网站的LOGO将调整dynamicaly根据手机屏幕尺寸 - 如将彩色矩形 - 但主要的想法是，到达屏幕的时一定宽度的“全视图”链接旁边的文本将消失，矩形将移动到页面标志下方。

所有响应式网页模板和框架似乎都更喜欢'折叠菜单'方法，我认为这只是增加额外的触摸或点击来执行特定的功能。

来源

2014-02-13 braindeadclown

这是可能的引导，你必须使用'col-xs- *'，如果你能显示你的代码可以帮助你。 – Arun

<div class="col-md-4 col-xs-12">Site Logo</div> 
    <div class="col-md-2 col-xs-3">Link A</div> 
    <div class="col-md-2 col-xs-3">Link B</div> 
    <div class="col-md-2 col-xs-3">Link C</div> 
    <div class="col-md-2 col-xs-3">Link D</div>

这必须努力

来源

2014-02-13 16:04:12

第一个答案会工作，如果你适当的样式。

E.g.

.colmd4 { 
    width: 50%' 
    display: inline; 
    padding: 0; 
    } 

.col-md-2 { 
    width: 12%; 
    display: inline; 
    padding: auto;

记住手指生硬，并且具有在屏幕宽度4项是最接近你可以收拾他们。

另一种方法可以做到这一点，假设相同的5个div。

@media screen and (min-width:600px){ 
    div { 
     display: inline; 
     padding: 2em; 
     } 
    }

这将假定div显示手机的块样式。

额外的填充使他们更大的手指目标。

来源

2015-01-04 16:21:01

响应式Web导航菜单（带图像）

回答

相关问题