Use css3 to imitate the start menu of window7

Quite realistic, css3 is really powerful. What points should be paid attention to are still the same. The difficulty lies in fine-tuning the details, especially the production of gradient background. CSS3 is very flexible. Next time I have the opportunity, I will post a detailed tutorial on CSS3 gradient background.

Quite realistic, css3 is really powerful.
Friendly reminder: Please do not browse under IE.
Let’s take a look at the original author’s design sketch:

Concise creation process

Step one: Create the following menu structure

<p id="startmenu"> 
<ul id="programs"> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="firefox-32.png"  class="lazy"   alt="" />Mozilla Firefoxa></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="chrome.png"  class="lazy"   alt="" />Google Chromea></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="safari.png"  class="lazy"   alt="" />Safaria></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="opera.png"  class="lazy"   alt="" />Operaa></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="ie.png"  class="lazy"   alt="" />Internet Explorera></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="rss_32.png"  class="lazy"   alt="" />RSS Feedsa></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="twitter_32.png"  class="lazy"   alt="" />Twittera></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="delicious_32.png"  class="lazy"   alt="" />Deliciousa></li> 
<ul> 
<ul id="links"> 
<li class="icon"><img src="/static/imghwm/default1.png"  data-src="folder.png"  class="lazy"   alt="" /></li> 
<li><a href="#"><span>Documentsspan>a></li> 
<li><a href="#"><span>Picturesspan>a></li> 
<li><a href="#"><span>Musicspan>a></li> 
<li><a href="#"><span>Computerspan>a></li> 
<li><a href="#"><span>Networkspan>a></li> 
<li><a href="#"><span>Connect tospan>a></li> 
<ul> 
p>

The start menu of win7 has two parts, the program menu on the left and the system menu on the right.

Step 2: Menu container css

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px; 
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative; 
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; 
background-color:#619bb9; 
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); 
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

There are several points of concern, you can pay attention to:

-moz-border-radius:5px;-webkit-border-radius:5px;圆角效果，这是css3中应用最广的 
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果 
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景

Step 3: css on the left side of the menu

#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px; 
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff; 
-moz-border-radius:3px;-webkit-border-radius:3px;} 
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; 
color:#4b4b4b; text-decoration:none; min-width:220px;} 
#programs a:hover {border:solid 1px #7da2ce; 
-moz-border-radius:3px; -webkit-border-radius:3px; 
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; 
background-color:#cfe3fd; 
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd); 
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));} 
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

What is worth noting here is the effect setting of the mouse passing through the menu item, which is the style in #programs a:hover, This is the difficulty, and it is also the power of CSS3, which is still rounded corners, shadows, and gradient backgrounds.

Step 4: The CSS part on the right side of the menu

#links {margin:7px; margin-top:-30px;} 
#links li.icon {text-align:center;} 
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative; 
color:#fff; text-decoration:none; min-width:120px;} 
#links a:hover {border:solid 1px #000; 
-moz-border-radius:3px; -webkit-border-radius:3px; 
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; 
background-color:#658da0; 
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55)); 
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); 
} 
#links a span { padding:5px; display:block; } 
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5)); 
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), 
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

What are the points to pay attention to? The difficulty lies in fine-tuning the details, especially The production of gradient background is very flexible in CSS3.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS to implement a large drop-down menu

CSS page layout with left, middle and right columns Implementation

The above is the detailed content of Use css3 to imitate the start menu of window7. For more information, please follow other related articles on the PHP Chinese website!