Home » CSS » பிளாக்கர் : மெகா மெனு பார்கள் (Blogger Mega Menu Bar )

Monday, February 20, 2012

பிளாக்கர் : மெகா மெனு பார்கள் (Blogger Mega Menu Bar )



அதிகமாக பெரிய சமூகவலைத்தளங்களில் காணப்படும்  மெகா மெனு பார்கள்
சாதாரணமான ப்ளாக்ஸ்போட் தளங்களில் நிருவுவதில்லை ..மெனுக்களை தொடும் போது அதன் முழு விளக்கம் அறிய முடியும் .. அதிகமான அளவு சி.எஸ்.எஸ். நிரல்களால் தயாரிக்கப்படும் இந்த மெனு பார்கள் மிகச் சிறந்த
மெனுக் களாக காணப்படுகிறது ... இணையத்தில் மிக பெரிய தொழில்நுட்ப தளமான


Mashable தளமும் இது போன்ற மெனு பாரை தான் பயன்படுத்துகிறது .

இந்த மெனு  இரண்டே படிகளில் நிறுவலாம் ..

முதலில் கீழே உள்ள கோடிங்கை தேடி அதன் முன்னாலே இணைக்கவும் (அதன் பின் வரும் கோடிங்கை )



]]></b:skin> 




#navWrap1 {
border: thin #2e363f solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 1000px;
margin: 0 auto;
}
#navWrap2 {
border: thin #a9c2dc solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #678;
padding: 0px 20px;
}

/* Styling the list */

#navWrap2 > ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 5px;
font-family: Tahoma, Geneva, sans-serif;
}
#navWrap2 > ul > li {
float: left;
position: relative;
}
#navWrap2 > ul > li > a {
padding: 10px 20px 15px 20px;
text-decoration: none;
color: #456;
text-shadow: #8194a8 1px 1px 0px;
font-weight: bold;
font-size: 17px;
display: block;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
}

/* Styling the hover effect */

#navWrap2 >  ul > li:hover{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#678', endColorstr='#EEE'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#678), to(#EEE)); /* for webkit browsers */
background: -moz-linear-gradient(top, #678, #EEE); /* for firefox 3.6+ */
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
border-top: 2px solid #cac9c9;
border-left: 2px solid #cac9c9;
border-right: 2px solid #cac9c9;
}
#navWrap2 >  ul > li:hover > a {
margin: 0;
color: #CCC;
text-shadow: #555 1px 1px 0px;
}

/* Styling the nested list */

#navWrap2 ul li:hover ul {
display: block;
-moz-box-shadow: 3px 3px 4px #a7a7a7;
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 0px 10px 10px 10px;
}
#navWrap2 ul ul {
display: none;
position: absolute;
left: -2px;
border-bottom: 2px solid #CCC;
border-left: 2px solid #CCC;
border-right: 2px solid #CCC;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#CCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #EEE,  #CCC); /* for firefox 3.6+ */
width: 420px; 
padding: 20px;
}

/* Styling the contents of nested list */

.navListFloat ol {
padding: 0;
margin: 0;
}
#navWrap2 ul ul li {
list-style: none;
}
#navWrap2 ul ul li a {
text-decoration: none;
color: #777;
padding: 4px;
}
#navWrap2 ul ul li a:hover {
color: #456;
}
#navWrap2 ul ul p {
font-family: Tahoma, Geneva, sans-serif;
color: #414141;
font-size: 14px;
}
#navWrap2 ul ul p b {
color: #414141;
font-size: 16px;
}
.navListFloat {
float: left;
width: 106px;
margin: 0px 17px 17px 17px;
}
.navListFloat li {
font-size: 13px;
}
.newsletter > input {
margin-top: 44px;
}
.newsletter div {
float: left;
margin-right: 25px;
}

/* Styling the search form */

.search {
float: right;
}
.searchBox {
float: left;
margin-top: 12px;
height: 23px;
border-top: thin solid #3c444c;
border-left: thin solid #3c444c;
border-right: thin solid white;
border-bottom: thin solid white;
background: #e9e9e9;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #555;
padding: 0 0 1px 3px;
}
.searchIMG {
float: left;
margin-top: 10px;
margin-left: -5px;
}
img {
margin-top: 17px;
border: none;
}
.clear {display: block;clear: both }

 1000px என்பது மொத்த மெனு பாரின் அகலம் 420px கீழேவிரியும் பகுதியின் அகலம் .....உங்கள் தேவைக்கேற்பஅதனை மாற்றிக் கொள்ளலாம்  .


 2 . அதன் பின் ADD A GEDJET / WIDJET / PAGE ELEMANT அல்லது <body> 

அதற்குபின் அல்லது உங்கள் டெம்ப்ளேட்-ட்டுக்கு ஏற்ற வாறு கீழே வரும் கோடிங்களை சேர்க்கவும் .. 





 <div id="navWrap1">
<div id="navWrap2">
<ul>
<li>
<a href="#">Home</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Welcome to ABC.com</p> 
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s,  when an unknown printer took a galley of type and scrambled it to make a  type specimen book.</p>
<p>It has survived not only five  centuries, but also the leap into electronic typesetting, remaining  essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#"> About</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">About us</p> 
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem  Ipsum has been the industry's standard dummy text ever since the 1500s,  when an unknown printer took a galley of type and scrambled it to make a  type specimen book. </p>
<p>It has survived not only  five centuries, but also the leap into electronic typesetting, remaining  essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#">Contact</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Contact</p> 
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<form  method="post" action="#">
<p>Name</p>
<input type="text" name="Name"/>
<p>Email :</p>
<input type="text" name="Email"/>
<p>Comments :</p>
<textarea name="comments" cols="40" rows="5">
Enter your message here!
</textarea>
<br/>
<br/>
<input type="submit" value="Submit" />
</form>
</li>
</ul>

</li>
<li><a href="#">Portfolio</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Portfolio</p> 
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<div class="navListFloat">
<p>Development</p>
<ol>
<li><a href="#">TutSite</a></li>
<li><a href="#">BidBay</a></li>
<li><a href="#">Evideo</a></li>
<li><a href="#">MusicBay</a></li>
<li><a href="#">Network 2.0</a></li>
</ol>

</div>

<div class="navListFloat">
<p>Web Design</p>
<ol>
<li><a href="#">Playsite</a></li>
<li><a href="#">Gamer Station</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

<div class="navListFloat">
<p> Other Projects</p>
<ol>
<li><a href="#">Incognito</a></li>
<li><a href="#">ItSells.com</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

</li>
</ul>
</li>

<li ><a href="#">Social</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Social</p> 
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<form class="newsletter"  method="post" action="#">
<p><b>Join newsletter</b></p>
<div>
<p>Name</p>
<input type="text" name="Name"/>
</div>
<div>
<p>Email :</p>
<input type="text" name="Email"/>
</div>
<input type="submit" value="Join" />
</form>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<a href="#"><img src="http://link-image-rss.png" alt="RSS"/></a>
<a href="#"><img src="http://link-image-twitter.png" alt="twit"/></a>
<a href="#"><img src="http://link-image-facebook.png" alt="face"/></a>
<a href="#"><img src="http://link-image-stumble.png" alt="su"/></a>
<a href="#"><img src="http://link-image-linkedin.png" alt="in"/></a>
</li> 
</ul>
</li>
</ul>

<form class="search"  method="post" action="#">
<input type="text" name="search" class="searchBox"/>
<input type="image" src="http://link-image-searchBtn.png" class="searchIMG" />
</form>
<span class="clear"></span>

</div>
</div>

#  என்று வரும் இடங்களில் லிங்க் -களும் மற்ற பகுதிகளில்


 SAVE TEMPLATE   செய்வதற்கு முன் PREVIEW (முன்னோட்டம் ) பார்த்து

கொள்ளவும்  ....

சரி  . எப்படி இருக்கும் இந்த மெனு பார் ..








2 comments: