SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Effect

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Effect

    Hi guys,

    Im trying to implement an effect on my website heres the deal:

    Visit: www.awdio.com/ and look for the sidebar.jpg section.

    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.

    example.jpg

    The link to view my trying is : http://www.bydecronics.com.br/

    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

    Thanks guys

  2. #2
    SitePoint Enthusiast barrykins's Avatar
    Join Date
    Feb 2011
    Location
    Virginia Beach, Virginia
    Posts
    47
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @riner -- Why is it the effect only works on the one? I like the effect though!

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @barrykins Its because i started coding and its not getting on the way it should so i didnt code on the others! o_O

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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).

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •