اضواء CSS القائمة

الأضواء القائمة يستفيد من CSS3 في حدود دائرة نصف قطرها الممتلكات و التحولات لإضافة خلفية دائرية لعناصر القائمة التي عندما تتحرك الماوس فوق كل منها. والنتيجة هي مثل فلاش، القائمة الأضواء أنيق! خلفية دائرية يظهر في جميع المتصفحات الرئيسية، بما في ذلك IE9، في حين أن تأثير انتقال تعمل في المتصفحات التي تدعم CSS3 التحولات، سفاري 3.1 +، جوجل كروم، وأوبرا 11.6 +.

<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}


.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

</style>
<div class="spotlightmenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>DHTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Forums</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
</ul>
</div>