如何在现有背景图片上添加侧边菜单

问题描述：

我正在创建一个网站，至今我已经包含了页眉内容和页脚。现在我被要求在现有的背景图片上添加一个侧边菜单。我尝试使用如何在现有背景图片上添加侧边菜单

 
     <%@ include file="sidemenu.jsp"%>

但它并没有增加现有的 < div>组件。相反，它会推低div，使其超出背景图像。

你能告诉我如何做到这一点？

背景图片是否具有该网站的完整宽度和高度？ –

不包括标题菜单，其余的高度是相同的。宽度不同... –

答

基本上，如果你想放的东西在另一个上面，你可以用相对/绝对像下面的例子位置：

<div id="bg"> 
    <div class="sidebar">side menu goes here</div> 
</div> 

#bg{ 
    position:relative; 
} 
.sidebar{ 
    position:absolute; 
    top:0; 
    left:0; /* assign the element to the left */ 
}

谢谢..：D –

没问题。并欢迎:) –

答

让我们看一个例子： Example

HTML ：

<div id="mainDiv"> 
    <div id="header">This is my header</div> 
    <div id="menu"> 
      <li>My first option</li> 
      <li>My second option</li> 
    </div> 
    <div id="footer">My footer</div> 
</div>

CSS：

mainDiv { 
    width: 1024px; 
    height: auto; 
    background: #ccc; 
} 

#header { 
    width: 100%; 
    height: 20px; 
    background: yellow; 
} 

#menu { 
    width: 200px; 
    height: 50px; 
    background: red; 
} 

#footer { 
    width: 100%; 
    height: 20px; 
    background: black; 
    color: white; 
}

正如你在这个例子看到，我添加了灰色背景的主DIV。我明白，在你的情况下，DIV包含一个图像。

红色方块是您的菜单，您可以使用包含标签修改该DIV。

用黄色表示标题，用黑色表示页脚。

我不知道这是否能帮助你实现你想要的。

谢谢，真的很有用.. –

@ user2411994欢迎:) – maqjav

如何在现有背景图片上添加侧边菜单

相关推荐