• Home
  • Contact
blog.biernacki.ca

Kuba's Online Workshop

  • Home
  • Contact

Aristo CSS3 Menu V2

04/22/2011 CSS How To 4 Comments

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.

AristoCSS3demomenu

Windsor Ultimate kicks off its Summer 2011 Season

Tesla Model S - I'd love to see it drive across the US/Canada

Categories
  • Android
  • Apple
  • Coldfusion
  • Cool Apps
  • CSS
  • GitHub
  • Hardware
  • How To
  • In the News
  • Javascript
  • Linux
  • PHP
  • RC Hobby
  • Reviews
  • SysAdmin
  • Thoughts & Rants
  • Tinkering
Recent Comments
  • Jim on Fixing ONKYO RC-710m Remote volume issues
  • Tony on Fixing ONKYO RC-710m Remote volume issues
  • Robert Lawrence on Fixing ONKYO RC-710m Remote volume issues
  • Dasen on Fixing ONKYO RC-710m Remote volume issues
  • Ahmed on Fixing ONKYO RC-710m Remote volume issues
RollmyBlog
  • Twitter
  • WebMojo Design
  • Windsor Ultimate
Archives
  • June 2020
  • January 2015
  • June 2014
  • February 2014
  • January 2014
  • December 2013
  • May 2013
  • February 2013
  • July 2012
  • June 2012
  • February 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • April 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • August 2010
  • July 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • November 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • June 2008
  • October 2007
  • September 2007
  • June 2007
  • May 2007
  • April 2007
  • March 2007
  • January 2007
Proudly powered by WordPress | Theme: Doo by ThemeVS.