内部带有 div 的导航(两个不同的菜单) [英] Nav with div inside (two different menus)

问题描述

我做了一个我想做的事情的图像，有点，但我似乎无法解决.

我想要什么:

我目前有导航，但它都在一个 div 中，我想做的是将它分开，有两个不同的 div，每个都有不同的内容.

这是我的实际代码.

更新:

CSS

#nav{位置:固定；顶部:0；左:0；宽度:100%；高度:7%；文本对齐:居中；填充:.5em 0 1em 0；z-索引:1；溢出:隐藏；背景图像:-webkit-梯度(线性，右上角，左下角，颜色停止(0，#E1A141)，色标(0.43，#DF7266));背景图像:-o-线性梯度(左下角，#E1A141 0%，#DF7266 43%)；背景图像:-moz-线性梯度(左下角，#E1A141 0%，#DF7266 43%)；背景图像:-webkit-线性梯度(左下角，#E1A141 0%，#DF7266 43%)；背景图像:-ms-线性梯度(左下角，#E1A141 0%，#DF7266 43%)；背景图像:线性渐变(到左下角，#E1A141 0%，#DF7266 43%)；}div#a{浮动:左！重要；宽度:50%；显示:内联！重要；}div#b{浮动:左！重要；宽度:50%；}#nav >超{宽度:40%；行高:0px；显示:内联块；}#nav >ul:之前，#nav >ul:之后{内容:'sentido';宽度:300%；位置:绝对；顶部:50%；边距顶部:-2px；高度:5px；边框顶部:实心 1px rgba(192,192,192,0.35);边框底部:实心 1px rgba(192,192,192,0.35);}#nav >ul:之前{左:100%；左边距:1px；}#nav >ul:之后{正确:100%；右边距:1px；}#nav >升 >李{显示:内联块；边距:-9px 0.5em 0 0.5em;边界半径:0.5em；填充:0.85em；边框:实心1px透明；-moz-transition:颜色 0.35s 缓入，边框颜色 0.35s 缓入；-webkit-transition:color 0.35s 缓入，border-color 0.35s 缓入；-o-transition:color 0.35s 缓入淡出，border-color 0.35s 缓入淡出；-ms-transition:color 0.35s 缓入淡出，border-color 0.35s 缓入淡出；过渡:颜色 0.35 秒缓出，边框颜色 0.35 秒缓入；}#nav >升 >活跃的{边框颜色:rgba(192,192,192,0.35);}#nav >升 >立>一种，#nav >升 >立>跨度{显示:块；颜色:继承；文字装饰:无；边框:0；大纲:0；}#nav >升 >立>超{显示:无；}

html

 
<div id="a"><ul><li><a href="index.html">Inicio</a></li><li><a href="#banner" class="scrolly">Encuentra</a></li><li><a href="right-sidebar.html">Aventura al Azar</a></li><li><a href="#footer" class="scrolly">Contacto</a></li>

<div id="b">holibebe </div></nav>

任何帮助将不胜感激.

谢谢，恩里克布拉沃.

解决方案

将 div(1 和 2)设置为其父级的 50%，在这种情况下，nav 元素然后浮动 div并清除它们.

基本示例，脱离你的形象:

JsFiddle 示例

I made an image of what I would like to do, sort of, but I cant seem to work it out.

What I would like:

I currently have the nav but it is all in a div, what I want to do, is to divide it, have two different divs and each with different content.

Here's my actual code.

UPDATED:

CSS

#nav
{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:7%;
    text-align: center;
    padding: .5em 0 1em 0;
    z-index: 1;
    overflow: hidden;
    background-image: -webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0, #E1A141),
    color-stop(0.43, #DF7266)
        );
    background-image: -o-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -moz-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -webkit-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -ms-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: linear-gradient(to left bottom, #E1A141 0%, #DF7266 43%);
    }

    div#a
    {
    float: left !important;
    width: 50%;
    display:inline !important;
    }

    div#b
    {
    float: left !important;
    width: 50%;
    }

    #nav > ul
    {
        width:40%;
        line-height: 0px;
        display: inline-block;
    }

        #nav > ul:before,
        #nav > ul:after
        {
            content: 'sentido';
            width: 300%;
            position: absolute;
            top: 50%;
            margin-top: -2px;

            height: 5px;
            border-top: solid 1px rgba(192,192,192,0.35);
            border-bottom: solid 1px rgba(192,192,192,0.35);
        }

        #nav > ul:before
        {
            left: 100%;
            margin-left: 1px;
        }

        #nav > ul:after
        {
            right: 100%;
            margin-right: 1px;
        }

        #nav > ul > li
        {
            display: inline-block;
            margin: -9px 0.5em 0 0.5em;
            border-radius: 0.5em;
            padding: 0.85em;
            border: solid 1px transparent;
            -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
        }

            #nav > ul > li.active
            {
                border-color: rgba(192,192,192,0.35);
            }

            #nav > ul > li > a,
            #nav > ul > li > span
            {
                display: block;
                color: inherit;
                text-decoration: none;
                border: 0;
                outline: 0;
            }

            #nav > ul > li > ul
            {
                display: none;
            }

html

                <nav id="nav" style="z-index: 9999;" id="navigation">
                    <div id="a">
                    <ul>
                        <li><a href="index.html">Inicio</a></li>
                        <li><a href="#banner" class="scrolly">Encuentra</a></li>
                        <li><a href="right-sidebar.html">Aventura al Azar</a></li>
                        <li><a href="#footer" class="scrolly">Contacto</a></li>
                    </ul>
                    </div>
                    <div id="b"> holibebe </div>
                </nav>

Any help will be greatly appreciated.

Thanks, Enrique Bravo.

解决方案

Set your divs(1 and 2) to be 50% of their parent, in this case the nav element then float the divs and clear them.

BASIC example, going off of your image:

JsFiddle Example

这篇关于内部带有 div 的导航(两个不同的菜单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！