තිරය පිටුපසට පිවිසෙන ඔබ සාදරයෙන් පිලිගනු ලබනවා !: Pure CSS Menu

Click to Zoom

යාලුවනේ ඉතින් කොහොමද? මම අද කියන්න යන්නේ සුපිරි CSS menu එකක් හදන විදිහ ගැන. අනංමනං J Query කෑලි නැතුව මම මේක හැදුවේ CSS 3 වලින්. ඔයාලගේ machine එකේ CSS 3 එහෙම නැත්තනම් පහලින් Download කරගෙනම වැඩේ පටන් ගත්තහම ලේසියි.

CSS 3 බාගන්න

MARKUP

මුලින්ම html file එකේ අපිට menu එක create කරගන්න වෙනවා . එකට නම් ඉතින් html ගැන පොඩි දැනුමක් ඕන වෙනවා. මේ css වලින් කරන්නේ අපි ලියපු html code එක වැඩ දාලා ලස්සන කරන එක. අපි බලමු කොහොමද කරන්නේ කියලා.

මුලින්ම පහත පරිදි html code එක සහ දෙවනුව css code ඔබට දකින්නට ලැබේවි.

HTML CODE

<div class="nav">
 
<ul> begin menu
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">3ds Max </a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Perl</a></li>
<li><a href="#"></a>
<div class="floatI">
  
<br /><br /><img src="Trash Full.png"   alt="" width="90px" height="90px"/>
<h3 class="h3">
Caption here</h3>
</div>
<hr />
<br /><p>
A tutorial is a method of transferring knowledge and may be used as a part of a learning process. More interactive and specific 
than a book or a lecture; a tutorial seeks to teach by example and supply the information to complete a certain task.
</p>
<hr />
<a href="">Read More</a> </li>
</ul>
</li>
<li><a href="#">Tool</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
/*Code by laksiri bandara. founder and Author in thirayapitupasa.blogspot.com*/

CSS CODE

body /*Style with body color*/
{
    background:-webkit-linear-gradient(#ffffff,#ededed);
           background:-moz-linear-gradient(#ffffff,#ededed);
           background:-linear-gradient(#ffffff,#ededed);
           background-repeat:repeat-x;   
    
    }
    
    /*Start with navigation menu*/

.nav ul ul
        {
            display:none;  
            }
        .nav ul li:hover > ul
        {
            display:block;                            
              
            }

.nav ul
{
    background-color:#1e252f;
    background:-webkit-linear-gradient(#1e252f,#0e1520);
    background: linear-gradient(top, #1e252f 0%, #0e1520 100%); 
    background:-moz-linear-gradient(right,#1e252f 1%,#0e1520 100%); 
    padding:0 20px;    
    box-shadow: 0px 0px 10px rgba(0,0,0,0.60);
    border-radius:5px 5px 0px 0px;
    list-style:none;     
    position:relative;
    display:inline-block; 
                 
    }
    
    .nav ul:after
    {
        content:"";
        clear:both;
        display:block;  
        } 
        
      
       .nav ul li
       {
           float:left;           
           }
        .nav ul li:hover
        {
           background:-webkit-linear-gradient(#ffffff,#ededed);
           background:-moz-linear-gradient(#ffffff,#ededed);
           background:-linear-gradient(#ffffff,#ededed);
           
            }
            
            
        .nav ul li:hover a
        {
            color:#000;
           transition: all 0.6s linear;            
             
            }
            
        .nav ul li a
        {
            display:block;
            padding:15px 40px;
            color:#fff;
            text-decoration:none;
            font:bold 12px/25px Arial;
            text-shadow:0px 0px 0.5px #fff;
            text-align:justify;                  
            
            }  
            
   .nav ul ul
    {
       background:-webkit-linear-gradient(#ffffff,#ededed);                         
       border-radius:3px;                
       position:absolute; 
       padding:0;
       top:100%;               
              }

          .nav ul ul li
          {
               position:relative;
               float:left;               
                             
              } 
                               
                  .nav ul ul li a
                  {
                      padding:10px 40px;
                      
                      }
                      
                  .nav ul ul li a:hover
                  {
                      color:#000;
                      }  
                      
                   .nav ul ul ul
                   {
                       position:absolute;
                       left:100%;
                       top:0; 
                       }  
                       
                   .nav ul ul p
                   {
                    font:bold 10.5px/25px Arial;
                    text-align:left;
                    text-shadow:1px 1px -3px #fff;                       
                    margin: 1px 1px 0px 0px;
                    height:130px;
                    width:470px;              
                    text-decoration:none;
                    color:black;               
                              
                       } 
                       
                      .nav ul ul a
                      {
                          float:right; 
                          }  
                                         
                       
                    .floatI
                    {
                        float:left;
                        width:100px;
                        } 

  
              .h3        /*h3 text tag for css*/
              {
                  font:bold 10px/25px Arial;
                       text-align:center;
                       text-shadow:1px 1px -3px #fff;
                       text-decoration:none;
                       color:black;
                  }
                  
                  hr  /*Apply to the Horizontal rule*/
                  {
                       background:#eeeeee;
                       height:0px;
                     fit-position:100%;                                               
                      }
                     
              /*------------End of Line------------------------------------------*/
              
/*Code by laksiri bandara. founder and Author in thirayapitupasa.blogspot.com*/

මේකෙදි css file එක html file එකේ reference එකක් විදිහට link කරන්න ඕන. එක කරන්නේ මෙන්න මේ විදිහට.

<head>
<title></title>
<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>

මේක head tag එක ඇතුලේ තමා link කරන්න ඕනේ.දැන් වැඩේ හරි. දැන් ඉතින් ඔක්කොම වගේ හරි.තව ගැටළු තියෙනවනම් ඔන්න project file එක බාගන්න. එතකොට ඔබේ ගැටළු නිරාකරණය වෙයි.

ඔන්න දැන් ඔක්කොම තියෙනවා. දැන් ඉතින් තියෙන්නේ වැඩ පටන් ගන්න.දැන් ඔයගොල්ල දන්න සෙල්ලං දාලා ඔයාලගේ website එකට දාගෙනම බලන්න . තවත් ලිපියකින් හමුවෙමු. ඔන්න මම ගියා. මතක ඇතුව comment එකක් ගෙන යන්න.

සැ:යු :- මෙහි එන සියලු නිර්මාණ ලක්සිරි බණ්ඩාර වන මා විසින් නිර්මාණය කරන ලද ඒවා වේ.

Compatibility with

Monday, May 6, 2013

Pure CSS Menu

2 comments: