Home » Blogger , Menu » Horizontal Menu ေလးလုပ္ရေအာင္

Horizontal Menu ေလးလုပ္ရေအာင္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 8:35 PM with No comments

ဘေလာ့တစ္ခုရဲ႕ အလွအပဟာလည္း Menu ေလးေတြနဲ႔သက္ဆိုင္ေနပါတယ္...။။....။။
ဒါေၾကာင့္ လွလည္းလွၿပီး... အသံုးျပဳရတာလည္း လြယ္ကူမယ့္ Menu Bar ေလးေတြ ေပးလိုက္ပါမယ္။
ကဲစၿပီေနာ္....

►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFg_hc15nKmldSBwSndxKjSJG-5jdbABMP8UZTRFPjf5VMqWTk4slDIB5ZL3-q1qKEVr1mAxFrsizoJD54ctKBpEwzr3m1EO-nFKLBQckadE2j8bl5CwVebahko4h4Pxie0Ja4sxtCxUQ/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiPKqoHZ-V41DAbVlbjw-UrgNQetqgzK2E2h-0SfH2M5LK1de-00fOEg-gdehk2F_l7xRUULIyHzTIQZQ6kKydN9cWO9lK6O5YXCjt4Yn616EcZZQo4hsthFRLiyW_aWNROKxej2oGnpk/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSOMtBNnDrHqIr2wPiJhweNLTLq2tWqRXl9nTjAhyphenhyphenXg_ZFCySJsOJQvx-2lwIiSXSgyEDJWmyZ7s8CzoEA9FDDbCjcjJdmux374Pt5KiqZrRmvEsqyxg1dfVH5e7KvAl8m8xzdvuFN_A/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37TaeoMecijUf3ZbAVTGUBeC5juvsTrpkmST2EWu3xJdsULFtgkXHINGaoTvfdNIDQJ5oP8ejdCFybEfxNdQNrdeefalgJn52z-aY1y_6LccYqc3YhC1BrutlkJCMmY5itd7j8bxkcAU/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk1Wt0IUizocQEubyOCb0spdhzMjS7IIt3HCD8dtm_mMhwk1AdYLfBslKRi2cx6xaM60O4u5o7zbbQF7LoeiAqlxzsPaO6YiyQeI1KBqiSLJoYVh6nm4_LcafFVIEyymkYyBRZaxb1Ns/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Md1WI7RgJYw094TBP3COPrpEAGtav7nyiC2QxBCVhWvB-zAaD4qdSssHq2lcx5zGNsnnzbcKbAkMyfpKsk3O_NWiUeU8vSPhmO7ppMaqNC_jD9xRwrZ8JJpMR2o8H9lhhOJVDkOxt5w/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer">
<ul id="navlist">
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7Im_xl5gluy4vkHq9ByqZP2mN5wHufkFHw99JPk7IJbYIaNPb53OMaFPoJHmqM4xCSIpV443-2hYsrrywrKOVtSG4xrjlGNtrHtjbjUOLluFHuNB2R7u6l9Dird_GbmRD8kyLPpaHtE/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4vRo89Zrp08hjC1dY1UC9Fy-p7kY51ph2jCKEtuOkc0ziakULyRg9C_mIebMvDClL_QDCs1AHNFVQ7Q_BO_jGmOa5cpDUN7esz8btStakje8eIRwtDJClCH3YH0Fm4kNy50OmjswTx0/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIC37FMQ_yrmxVLzWNZ6nePcWYzPfnjfJl-1VLEaL2Z8By4-2jIO08Kbe7vk67Moy_X7DtzZLowtMmZV7zDowKoOZx9bG5uNTrYQnRh27hDM_9hK-B1DBis9qxPf2sVh-qdMF2sxAzb4g/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sfEWJoJwNfAShUiv6HL4_PZZBCOQE3KA1JJxIMa3iN8CzkwWOsEDbCYYY7osoi1NAvzJa3-woeYlZZAysnudMxUJt0m7ZSOpqlLvP6Z0R_nRrwCNatedN_3h2JDAj969sVShH_1LRcs/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81bBaufI3LDRIm51gKY3waJKMS-5v_oug-5OrFyECtD6HKykXoXodxzHKvBPkAwxSVyrxaItg2iq6bVYEvgQ9IOKcGm95RQQf7qm3HVy2BSGG8bLwzEsoMqfz1tKdYQ-01GHAtv08Obc/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container">
<ul id="nav">
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LLHUo3P3M5lZO6wo9ONjxnhSVJusPAyE9gBdOhoYdDyH4yyj3bgy2Q0I0fldDufjcFDTBxgCb0m1hiwgL5fhGrj8S1AGLfrrA6WIfW3lCV8AwOI5lAC1nR2FdFuN67XWkjReqrf0-mQ/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWg5Ss_hdfqqVKA2v7lBSUHVxwzKM60yOgMx8Iuqij8lcSe0oXIrRvY5P9wWE0pUV9gS2i0jW1B8eO8OmJdnQCd7x4RZnGaRC6QCjG3_zdXrFY94Mjp4x64qiMd-C6fXIUptxlEZ7J8E/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD">
<ul>
<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>
</ul>
</div>

0 ထင္ျမင္ခ်က္:

Post a Comment

လာေရာက္အားေပးၾကတဲ့အတြက္ အားလံုးကို ေက်းဇူးတင္ပါသည္။
အဆင္မေျပတာရွိရင္ comment ေပးတာပဲျဖစ္ျဖစ္၊ cbox ထဲမွာ message ထားခဲ့တာပဲျဖစ္ျဖစ္ ေဆြးေႏြးႏိုင္ပါသည္။

Support : ကၽြႏု္ပ္၏ ေက်ာင္း | My School | ျမတ္မဂၤလာ
Copyright © 2013. ကၽြႏု္ပ္၏ ေက်ာင္း - All Rights Reserved

Template Created by My School Published by Justin Philippe
Proudly powered by Blogger