Aristo CSS3 Menu V2

CSS, How To April 22nd, 2011

I found this menu structure after falling in love with the jQueryUI Aristo theme.  A really slick and smooth theme that I personally find, works very well with all my jQueryUI projects.  Whenever styling buttons of widgets (calendar, sliders, etc;) I reach for Aristo UI.

Anyway I found that this theme has also been crafted into a Menu using pure CSS3 techniques (sorry IE8 lovers, this stuff won’t fly for your browser or older spawn).  However, the problem with this initial menu design that I found was that not much explanation was given how to use the CSS (like why did he use SPAN’s inside the theme? Doesn’t look useful for me).  Also there were mistakes (spelling errors for class names, invalid class selectors, etc).

So I basically `updated` that version and dubbed it Aristo CSS3 Menu V2, below is all the things you need to roll your own. If you do use it in your design please at least shoot me over a link here, I will update for those that use / base their design off this work. I’m not taking full credit for it (after all I just corrected and fixed up the original design).

Teaser

Teaser screenshot of the Aristo CSS3 Menu V2

CSS

 .aristo-menu{
    border:none;
    border:0px;
    margin-left: -7px;
    margin-right: -7px;
    padding:0px;
    font-family:  Helvetica,Arial,sans-serif !important;
    font-size: 11px;
	position: relative;
}
.aristo-menu ul{
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
    background: -moz-linear-gradient(top, #ededed, #c4c4c4);
    display:block;
    height:28px;
    list-style:none;
    margin-top:0;
	margin-bottom: 0;
    padding-left: 10px;
    border: 1px solid #acacac;
    border-top-color: #bdbdbd;
    border-bottom-color: #949494;
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;
}
.aristo-menu li {
    float: left;
    height: 16px;
    display:block;
    padding: 6px 12px;
	margin: 0;
}
.aristo-menu ul li ul li{
	padding-left: 10px;
	width: 195px;
}
.aristo-menu li.right
{
    float:right;
    display:block;
}
.aristo-menu span.right
{
    float:right;
    display:block;
    line-height: 28px;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7);
    border-top: 1px solid #567c91;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin-top: -1px;
}
.aristo-menu li:hover, .aristo-menu ul li ul li:hover{
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7);
    border-top: 1px solid #567c91;
	border-left: 1px solid #88aec4;
	border-right: 1px solid #88aec4;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin: -1px -1px 0 -1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
	background: -moz-linear-gradient(top, #81afc8, #b7def4);
}
.aristo-menu ul li ul li:hover {
	margin: -1px;
}
.aristo-menu li a, .aristo-menu ul li ul li a{
    display:block;
    font-weight: bold;
    color: #4f4f4f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.698);
    margin:0px;
    text-decoration:none;
}
.aristo-menu li a:hover, .aristo-menu ul li:hover a{
    color:#313131;
    text-decoration:none;
}
.aristo-menu li ul, .aristo-menu li.right ul{
    display:none;
    height:auto;
    padding:0px;
    margin-top:6px;
    margin-left: -13px;
    position:absolute;
    border: 1px solid #acacac;
    border-top: 0px;
    border-bottom-color: #949494;
    -moz-border-radius: 0 0 0.214em 0.214em;
    width:205px;
    z-index:9999;
	box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
}
.aristo-menu li.right ul{
right: 0; /* fix for right hand side cutoff */
}
.aristo-menu li ul li{
    float: left;
    height: 20px;
    padding: 5px 0;
}
.aristo-menu li:hover ul{
    display:block;
}
.aristo-menu li li {
    display:block;
    margin:0px;
    padding:0px;
    width:205px;
}
.aristo-menu li:hover li a{
    background:none;
}
.aristo-menu li ul a{
    padding:0 6px;
    margin: 0 .5em;
    display:block;
    height:20px;
    font-style:normal;
    text-align:left;
}
.aristo-menu li ul a:hover, .aristo-menu li ul li:hover a{
    color:#313131;
    text-decoration:none;
}
.aristo-menu p {
    clear:left;
}
.aristo-menu span {
    display:block;
    float:right;
    line-height: 35px;
    padding: 0 25px;
}
.aristo-menu span a {
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

HTML

	<div class="aristo-menu">
        <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Content</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul></li>
		<li><a href="#">Stuff</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul></li>
	        <li class="right"><a href="#">Account</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Logout</a></li>
		</ul></li>
        </ul>
	</div>
View the Demo here.

Post comments if you have any on this, I will tweak it as I fix things, right now I don’t use the SPAN elements. It is still from the original, however I have fixed up the whole menu child elements and added a better hover effect from the original Aristo CSS3 buttons. As mentioned before, spelling mistakes have been fixed up, and a workable demo setup for you guys to try out.



4 Comments to “Aristo CSS3 Menu V2”

  1. David Martinez | May 19th, 2011 at 3:16 AM

    Congratulations! This menu is incredible, you rock! 😀

  2. Francis | May 30th, 2011 at 9:20 PM

    For IE lovers:

    .aristo-menu ul{
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
    background: -moz-linear-gradient(top, #ededed, #c4c4c4);
    /* For Internet Explorer 5.5 – 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EDEDED, endColorstr=#C4C4C4);
    /* For Internet Explorer 8 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#EDEDED, endColorstr=#C4C4C4)”;
    display:block;
    height:28px;
    list-style:none;
    margin:0;
    padding-left: 10px;
    border: 1px solid #acacac;
    border-top-color: #bdbdbd;
    border-bottom-color: #949494;
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;
    }

    .aristo-menu span.right
    {
    float:right;
    display:block;
    line-height: 28px;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7);
    /* For Internet Explorer 5.5 – 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBE1F7, endColorstr=#80ADC7);
    /* For Internet Explorer 8 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBE1F7, endColorstr=#80ADC7)”;
    border-top: 1px solid #567c91;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin-top: -1px;
    }
    .aristo-menu li:hover, .aristo-menu ul li ul li:hover{
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7);
    /* For Internet Explorer 5.5 – 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBE1F7, endColorstr=#80ADC7);
    /* For Internet Explorer 8 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBE1F7, endColorstr=#80ADC7)”;
    border-top: 1px solid #567c91;
    border-left: 1px solid #88aec4;
    border-right: 1px solid #88aec4;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin: -1px -1px 0 -1px;
    background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
    background: -moz-linear-gradient(top, #81afc8, #b7def4);
    }

    thanks for the “updated”…

  3. Rick | December 20th, 2015 at 3:32 PM

    Please HELP .!I have a repetitive task. I sceelt a corner of a box. I want to modify the box with a radius. I need to place the center of the circle ON the corner. Then I cut part of the radius and extend one line of the box to it. And the other line of the box gets cut so u end up with a quarter of the original circle left. How can I get it to effect a corner that i have sceelted. It seems the action only does it at the old X, Y, coordinates. Also is it possible to get the cut path at sceelted anchor points to work in an action? what about connect sceelted end points? Any advice would be much appreciated. Thanks !

  4. kredit annuitaetendarlehen zinssatz formel berechnung tilgung | October 22nd, 2016 at 11:24 AM

    I L O V E a good scary movie, but I don't care for the likes of Saw; mutilation and torture are not my idea of a good scary movie. I also don't care for the ones that are filmed from a video camera point of view… what's up with that?! Just give me a good, suspenseful, jump-out-and-scare-the-pants-off-you kinda movie, or even the creepy ghostly kind…. heck yeah, bring em on!

Leave a Comment