I want to make a sidebar like these in every box BUT, the box cant overextend the width/height of the <li> so it wont move the other boxes, and the possibility to interact in the sidebox, like showing a video and read a description with links. (the actual effect is only on the :hover, you cant move the cursor on it or it disapears).
I made some test but there´s 2 problems, the sidebar does effect the other boxes because its inside the <li> and i cant put a youtube video for example on autoplay when the box opens.
Should i use some javascript/jquery trick to autoplay the video? or only css can solve all my problems?
UPDATE: I Made some research and i realized that its using absolute positioning for every sidebox…wow…is that right? doesnt have any other solution?
(position: absolute; top: 943px; left: 295px; display: none;)…but still cant click inside the sidebox…bahh
I’m not really sure what you are asking as it sounds like you want the pop up box to overlap the other columns much in the same way that a dropdown menu works. If that’s the case you could use the basic dropdown menu method.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
width:500px;
margin:auto;
border:1px solid #000;
list-style:none;
padding:0;
overflow:hidden;
position:relative;
}
li { float:left; }
li li { width:202px; }
li, li > a {
width:100px;
height:100px;
display:block;
text-align:center;
line-height:100px;
}
li > a{width:98px;height:98px;}
li li, li li a {
line-height:normal;
text-align:left;
color:#fff;
}
li > a {
background:#fcf;
border:1px solid #000;
}
li > a:hover{background:#ff0;border:1px dotted red}
li ul {
position:absolute;
margin-left:-999em;
top:0;
background:#000;
color:#fff;
opacity:0.9;
width:180px;
padding:0 10px;
height:200px;
}
ul.one,ul.eight{background:red}
ul.two,ul.seven{background:green}
ul.three,ul.six{background:orange}
ul.four,ul.nine{background:teal}
ul.ten{background:blue}
li:hover ul { margin:0 0 0 101px }
li.right:hover ul{ margin:0 0 0 -201px }
</style>
</head>
<body>
<ul>
<li><a href="#">Box 1</a>
<ul class="one">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li><a href="#">Box 2</a>
<ul class="two">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li><a href="#">Box 3</a>
<ul class="three">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li class="right"><a href="#">Box 4</a>
<ul class="four">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li class="right"><a href="#">Box 5</a>
<ul class="five">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li><a href="#">Box 1</a>
<ul class="six">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li><a href="#">Box 2</a>
<ul class="seven">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li><a href="#">Box 3</a>
<ul class="eight">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li class="right"><a href="#">Box 4</a>
<ul class="nine">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
<li class="right"><a href="#">Box 5</a>
<ul class="ten">
<li>
<div>Lots of stuff can go here as required <a href="www.pmob.co.uk">including links</a></div>
</li>
</ul>
</li>
</ul>
</body>
</html>
(Not IE6)
It’s not very nice to navigate though because you have to move the mouse out and back to get to the middle elements (which is why the original just hovers and disappears).
@Paul_O_B i studied your sugestion and after some thoughts i realize that my idea is somehow complicated and i dont have the knowledge and time to do it, so i will just make the sideboxes with absolute positioning and some javascript to trigger the video autoplay!!
Thanks anyway, now, i will study some javascript hehe!
