Skip to content

CSS Menu

October 31, 2006

CSS меню хэрхэн хийх вэ? Үзэмтжтэй зураг багатай. menu011.gif
<style type=”text/css”>
.shadetabs
   {
   border-bottom: 1px solid gray;
   /* width: 90%; width of menu. Uncomment to change to a specific width */
   margin-bottom: 1em;
   }
.shadetabs ul
   {
   padding: 3px 0;
   margin-left: 0;
   margin-top: 1px;
   margin-bottom: 0;
   font: bold 12px Verdana;
   list-style-type: none;
   text-align: left; 
   /*set to left, center, or right to align the menu as desired*/
   }

.shadetabs li
   {
   display: inline;
   margin: 0;
   }

.shadetabs li a
   {
   text-decoration: none;
   padding: 3px 7px;
   margin-right: 3px;
   border: 1px solid #778;
   color: #2d2b2b;
   background: white url(зураг/shade.gif) top left repeat-x;
   }

.shadetabs li a:visited
   {
   color: #2d2b2b;
   }

.shadetabs li a:hover
   {
   text-decoration: underline;
   color: #2d2b2b;
   }

.shadetabs li.selected
   {
   position: relative;
   top: 1px;
   }

.shadetabs li.selected a
   { 
   /*selected main tab style */
   background-image: url(зураг/shadeactive.gif);
   border-bottom-color: white;
   }

.shadetabs li.selected a:hover
   {
   /*selected main tab style */
   text-decoration: none;
}
</style>

<div class=”shadetabs”>
<ul>
<li><a href=”#” mce_href=”#”>Menu</a></li>
<li><a href=”#” mce_href=”#”>Menu</a></li>
<li class=”selected”><a href=”#” mce_href=”#”>Selected menu</a></li>
<li><a href=”#” mce_href=”#”>Menu</a></li>
<li><a href=”#” mce_href=”#”>Menu</a></li>
</ul>
</div>

Дараах 2 зургийг зураг байрлах хавтасанд хуулаад стайл дээр дуудаж ажиллуулна.

shadeactive.gifShade

Амжилт хүсье.

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: