SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Menu With Down Arrow Extending Outside of List

    I cannot find the site or the name but how would one do this effect from hover without jquery

    Code:
     http://www.gayadesign.com/scripts/tabbed/ - look like this on hover 
    
    http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
    see how this points up.
    ?
    I want the arrow the be the same color (red) and extend below the list item. I simply flipped the position, (did not work),

    Is it margin or padding related?

    background: transparent url(media/pointer.gif) bottom center no-repeat;

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    If you are talking about the arrow rather than the sliding effect then you can do it like this:

    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.test {
    	margin:0 0 3em;
    	padding:0;
    	list-style:none;
    	zoom:1.0;
    }
    ul.test:after {
    	content:" ";
    	clear:both;
    	overflow:hidden;
    	height:0;
    	display:block;
    }
    .test li, .test a {
    	float:left;
    	position:relative;
    	background:red;
    	color:#fff;
    }
    .test li { margin:0 1px 0 0; }
    .test a {
    	height:2em;
    	line-height:2em;
    	padding:0 2em;
    	color:#fff;
    	text-decoration:none;
    }
    .test a:visited { color:#fff; }
    .test a:hover { visibility:visible }
    .test a:hover b {
    	position:absolute;
    	left:50%;
    	bottom:-10px;
    	margin-left:-5px;
    	border-left:10px dashed transparent;
    	border-right:10px dashed transparent;
    	border-top:10px solid red;
    	overflow:hidden;
    	height:0;
    }
    .test2 a:hover:after {
    	content:" ";
    	position:absolute;
    	left:50%;
    	bottom:-10px;
    	margin-left:-5px;
    	border-left:10px dashed transparent;
    	border-right:10px dashed transparent;
    	border-top:10px solid red;
    	overflow:hidden;
    	height:0;
    }
    </style>
    </head>
    
    <body>
    <h1>Ie6+</h1>
    <ul class="test">
    		<li><a href="#">List item<b></b></a></li>
    		<li><a href="#">List item<b></b></a></li>
    		<li><a href="#">List item<b></b></a></li>
    		<li><a href="#">List item<b></b></a></li>
    		<li><a href="#">List item<b></b></a></li>
    </ul>
    <h2>IE8+ (without extra b element)</h2>
    <ul class="test test2">
    		<li><a href="#">List item</a></li>
    		<li><a href="#">List item</a></li>
    		<li><a href="#">List item</a></li>
    		<li><a href="#">List item</a></li>
    		<li><a href="#">List item</a></li>
    </ul>
    </body>
    </html>
    It just uses an extra element to hold the spike which is created from mitred borders.

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works. I forgot to add that I have a submenu so it is not functioning with those edits alone. I tried some edits and it made it undisplayable. I also wanted the parent to stay in a hovered state (as I have) while the submenu(child) is hovered.

    here is the code from wp:
    Code:
    .menu {
    	background-color: #585858;
    	/*background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    	background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    	background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    	background-image: linear-gradient(top, #585858, #3d3d3d);*/
    	clear: both;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    	margin: 0 auto;
    }
    
    .menu, 
    .menu ul {
    	display: block;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .menu li {
    	border: 0;
    	display: block;
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	z-index: 5;
    }
    
    .menu li:hover {
    	white-space: normal;
    	z-index: 10000;
    }
    
    .menu li li {
    	float: none;
    }
    
    .menu ul {
    	left: 0;
    	position: absolute;
    	top: 0;
    	visibility: hidden;
    	z-index: 10;
    }
    
    .menu li:hover > ul {
    	top: 100%;
    	visibility: visible;
    }
    
    .menu li li:hover > ul {
    	left: 100%;
    	top: 0;
    }
    
    .menu:after, 
    .menu ul:after {
    	clear: both;
    	content: '.';
    	display: block;
    	height: 0;
    	overflow: hidden;
    	visibility: hidden;
    }
    
    .menu, 
    .menu ul {
    	min-height: 0;
    }
    
    .menu ul,
    .menu ul ul {
    	margin: 0;
    	padding: 0;
    }
    
    .menu ul li a:hover, 
    .menu li li a:hover {
    	color: #484848;
    	text-decoration: none;
    }
    
    .menu ul {
        margin-top: 1px;
    	min-width: 15em;
    	width: auto;
    }
    
    
    .menu a {
    	border-left: 1px solid #585858;
    	color: #fff;
        cursor: pointer;
    	display: block;
    	font-size: 14px;
    	font-weight: 700;
    	height: 45px;
    	line-height: 45px;
    	margin: 0;
    	/*padding: 0 0.9em;*/
    	position: relative;
    	text-decoration: none;
    	/*text-shadow: 0 -1px 0 #000;*/
    	padding: .3em 1.45em;
    }
    
    .menu a:hover {
    	background-color: #808080;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
    	background-image: -webkit-linear-gradient(top, #808080, #363636);
    	background-image: -moz-linear-gradient(top, #808080, #363636);
    	background-image: -ms-linear-gradient(top, #808080, #363636);
    	background-image: -o-linear-gradient(top, #808080, #363636);
    	background-image: linear-gradient(top, #808080, #363636);
    	color: #96ad2d;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
         background: transparent url(images/pointer.gif) bottom center no-repeat;
       
    }
    
    
    
    .menu li:hover a {
    	color: #96ad2d;
         background: transparent url(images/pointer.gif) bottom center no-repeat;
    	
    }
    
    .menu .current_page_item a,
    .menu .current-menu-item a {
    	background-color: #343434;
    }
    
    
    #menu-item-21 a {
    text-indent: -999em;
    width: 40px;
    background: url('images/home-icon.png') center center no-repeat !important;
    }
    	 
    #menu-item-21 a:hover {
    background: #EFEFEF url('images/home-icon-active.png') center center no-repeat !important;/*border:1px solid #ccc;*/
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    
    .home .menu .current_page_item a {
        background: none;
    	background-color: transparent;
        background-image: none;
        filter: none;
    }
    
    .menu li li {
    	background: #fff;
    	background-image: none;
    	border: 1px solid #e5e5e5;
    	color: #444;
    	filter: none;
        margin: -1px 0 1px 0;
    	width: auto;
    }
    
    .menu li li:last-child {
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    }
    
    .menu li li a {
    	background: transparent !important;
    	border: none;
    	color: #444 !important;
    	font-size: 12px;
    	font-weight: 400;
    	height: auto;
    	height: 20px;
    	line-height: 20px;
    	padding: 5px 10px;
    	text-shadow: none;
    	white-space: nowrap;
    	outline-style:none;
    }
    
    .menu li li:hover a {
    	background: #cad790 !important;/*f5f5f5*/
    	background-image: none;
    	border: none;
    	color: #444;
    	filter: none;
    }
     
    
    .menu ul > li + li {
    	border-top: 0;
    }
    
    .menu li li:hover > ul {
    	left: 100%;
    	top: 0;
    }
    
    .menu > li:first-child > a {
    	border-left: none;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Do you have a link to the page or at least the html that goes with the above. We need ot have a working example to play around with.

    also wanted the parent to stay in a hovered state (as I have) while the submenu(child) is hovered.
    You can usually do that by making the item visible while the list is hovered.

    e.g. li:hover #elementname{hover rules etc}

    In my example you can do it like this:

    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">
    .test, .test ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	zoom:1.0;
    }
    .test { margin:0 0 3em }
    .test:after {
    	content:" ";
    	clear:both;
    	overflow:hidden;
    	height:0;
    	display:block;
    }
    .test li, .test a {
    	float:left;
    	background:red;
    	color:#fff;
    }
    .test li {
    	margin:0 1px 0 0;
    	position:relative;
    	z-index:2;
    }
    .test a {
    	height:2em;
    	line-height:2em;
    	padding:0 2em;
    	color:#fff;
    	text-decoration:none;
    }
    .test a:visited { color:#fff; }
    .test a:hover { visibility:visible }
    .test>li:hover>a b {
    	position:absolute;
    	left:50%;
    	bottom:-10px;
    	margin-left:-5px;
    	border-left:10px dashed transparent;
    	border-right:10px dashed transparent;
    	border-top:10px solid red;
    	overflow:hidden;
    	height:0;
    	z-index:9;
    }
    .test2>li:hover>a:after {
    	content:" ";
    	position:absolute;
    	left:50%;
    	bottom:-10px;
    	margin-left:-5px;
    	border-left:10px dashed transparent;
    	border-right:10px dashed transparent;
    	border-top:10px solid red;
    	overflow:hidden;
    	height:0;
    	z-index:9;
    }
    .test ul {
    	position:absolute;
    	left:0;
    	top:100%;
    	width:10em;
    	border:1px solid #000;
    	border-top:0;
    	box-shadow:5px 5px 5px rgba(0,0,0,0.3);
    	margin-left:-999em;
    }
    .test li:hover ul { margin:0; }
    .test li:hover { z-index:999 }
    .test ul li, .test ul a {
    	float:none;
    	display:block;
    	background:#C3C;
    	margin:0;
    }
    .test ul a:hover { background:blue; }
    </style>
    </head>
    
    <body>
    <h1>Ie7+</h1>
    <ul class="test">
    		<li><a href="#">List item<b></b></a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item<b></b></a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item<b></b></a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item<b></b></a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item<b></b></a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    </ul>
    <h2>IE8+ (without extra b element)</h2>
    <ul class="test test2">
    		<li><a href="#">List item</a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item</a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item</a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item</a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    		<li><a href="#">List item</a>
    				<ul>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    						<li><a href="#">List item<b></b></a></li>
    				</ul>
    		</li>
    </ul>
    </body>
    </html>


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
  •