Sexy Dropdown Menu อีกหนึ่ง Menu สวย ๆ บน Blogger

Sexy Dropdown Menu เป็นเมนูที่สวยงาม ใช้งานได้คุ้มค่า และง่ายต่อการติดตั้ง  เมนูชนิดนี้พัฒนาโดย Soh Tanaka Webdesign ชื่อดัง ซึ่งผมจะขอหยิบยกมาดัดแปลงให้ติดตั้งบน Blogger ได้และง่ายขึ้น

ก่อนจะพูดถึงวิธีติดตั้งก็ขอแนะนำบล็อก ที่ผมได้รวม Menu ชนิดต่าง ๆ ที่สามารถติดตั้งร่วมกันได้ ส่วนใหญ่ก็จะเป็น Menu ที่ Apply ใช้กับสคริปต์ของ jQuery ถ้าเข้าไปชมแล้วถูกใจ Menu ไหน อยากได้สคริปต์ ก็สามารถดูสคริปต์ได้จาก Menu ด้านบนสุดของบล็อกที่ว่านี้ได้

http://jquerymenu.hackublog.com/

รูปตัวอย่างของ JQuery Sexy Dropdown Menu


วิธีสร้าง เมนู Menu บน Blogger blog


ขั้นตอนการติดตั้ง  Sexy Dropdown Menu


ขั้นที่ 1 ติดตั้ง CSS โดย Login เข้าไปที่ Blogger
จากแผงควบคุมไปที่ การออกแบบ  แก้ไข HTML >> และค้นหาโค้ด ]]></b:skin> จากนั้นวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว 

/*Sexy menu Edit by http://www.hackublog.com*/
#sexymenu{width:100%;background: url(http://upic.me/i/w2/topnav_bg.gif) repeat-x;}
ul.topnav {
list-style: none;
padding: 0;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://upic.me/i/7q/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://upic.me/i/4j/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
z-index:5000;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://upic.me/i/uf/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://upic.me/i/uf/dropdown_linkbg.gif) no-repeat 10px center;
}
หมายเหตุ
รูปทั้ง 4 นี้คุณควรดาวน์โหลดและ upload มาแทนที่รูปเดิม (แทน URL สีชมพู) เพื่อป้องกันกรณีรูปที่ฝากไว้โดนลบทิ้ง
http://upic.me/i/w2/topnav_bg.gif
http://upic.me/i/7q/topnav_hover.gif
http://upic.me/i/4j/subnav_btn.gif
http://upic.me/i/uf/dropdown_linkbg.gif

ขั้นที่ 2 ติดตั้ง Java Script
โดยต่อเนื่องจากขั้นที่ 1 ให้ค้นหาโค้ด </head> เมื่อพบแล้ววางโค้ดนี้ลงไปก่อนหน้าโค้ด </head>  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;);    
    $(&quot;ul.topnav li span&quot;).click(function() {
        $(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show();
        $(this).parent().hover(function() {
        }, function(){   
            $(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;);
        });
        }).hover(function() {
            $(this).addClass(&quot;subhover&quot;);
        }, function(){   
            $(this).removeClass(&quot;subhover&quot;);
    });
});
</script>
หมายเหตุ
ถ้าในแม่แบบของคุณมีการติดตั้งโค้ด
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
ก่อนหน้านี้อยู่แล้ว ให้ติดตั้งเพิ่มเฉพาะโค้ดสีน้ำเงิน และถ้าในแม่แบบมีการติดตั้งโค้ด
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
ก็ให้แทนที่ เลข 1.3.2 ด้วย ตัวเลข 1.4.2 และเพิ่มโค้ดสีน้ำเงินเพิ่มเข้าไป



ขั้นที่ 3 ระบุและเรียกใช้ Menu ด้วย HTML

ต่อเนื่องจากขั้นที่ 2 ให้ค้นหาโค้ด
<div class='main-outer'> 
ถ้าเป็นแม่แบบรุ่นเก่าอาจจะพบโค้ดเป็น
<div id='main'> 
หรือ
<div id='main-wrapper'> 

เมื่อพบโค้ดใดโค้ดหนึ่งที่ระบุตามข้างต้นแล้ว ให้วางโค้ดต่อไปนี้เอาไว้ก่อนหน้าโค้ดดังกล่าว

<div id="sexymenu">
<ul class="topnav">
            <li><a href="http://www.hackublog.com">Home</a></li>
            <li><a href="#">Tutorials</a>
                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>

                </ul>
            </li>
            <li><a href="#">Resources</a>

                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>

            </li>
            <li><a href="http://www.hackublog.com">About Us</a></li>

            <li><a href="http://www.hackublog.com">Advertise</a></li>
            <li><a href="http://www.hackublog.com">Submit</a></li>
            <li><a href="http://www.hackublog.com">Contact Us</a></li>
            <li><a href=http://jquerymenu.hackublog.com>Get This Menu</a></li>

        </ul>
</div>

วิธีปรับแต่ง
3.1 ถ้าต้องการเพิ่มหรือปรับแต่งเมนูหลักที่ไม่มี Dropdown ให้แก้หรือเพิ่มโค้ดสีน้ำเงิน ซึ่งจะมีรูปแบบโค้ดเป็น
<li><a href="ใส่ Link">ใส่ชื่อ Link</a></li>
Dropdown Menu เมนูสวย ๆ ในการ สร้าง blog แต่งบล็อก ทำบล็อก


3.2 กรณีที่ต้องการให้เกิด Dropdown ที่ Link ใดก็ให้ใช้ชุดโค้ด
            <li><a href="#">ชื่อ Link ตัวแม่</a>
                <ul class="subnav">
                    <li><a href="ใส่ Link1">ชื่อSubLink1</a></li>
                    <li><a href="ใส่ Link2">ชื่อSubLink2</a></li>
                    <li><a href="ใส่ Link3">ชื่อSubLink3</a></li>
                </ul>
            </li>
ปรับแต่ง blogspot สร้าง Menu ใน Blogger


Sub menu ที่เป็นสีเขียวก็สามารถเพิ่มได้อีกตามความต้องการครับ ถ้าทำการปรับแต่งจนเสร็จแล้วบันทึกแม่แบบ และจบขั้นตอน

ติดขัดในเรื่องใดที่เกี่ยวกับการติดตั้งเมนูชนิดนี้ โปรดสอบถามที่กล่อง Comment ด้านล่างบทความครับ สวัสดีครับ

Credit Script : Soh Tanaka  : www.sohtanaka.com
Hack to Blogger : Mr.Hackublog

ตอนนี้มีความคิดเห็น : 32 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ได้ความรู้ใหม่อีกแล้ว....ขอบคุนคะ

  1. ผมได้ทำตามเเล้วเเต่มันมาเรียงอยู่ลงมาอยู่ด้านข้างครับเเก้ยังไงครับ

  1. ลืมครับเเละมีโค๊ดขึ้นอยู่ข้างบนเต็มเลยเเก็ยังไงครับขอบคุณล่วงหน้าครับ

  1. @ freedom way : เกิดจากการใส่โค้ดไม่ถูกต้องครับ

  1. มันบอกว่าอย่างนี้อ่ะครับ

    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูปแบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: Open quote is expected for attribute "{1}" associated with an element type "href".

    ทำไงดี

  1. @ ShiningGreenFrog : ลองใสโค้ดและบันทึกทีละขั้นครับแล้วลองดูว่า error ที่โค้ดในขั้นตอนไหนครับ

  1. ขั้นที่ 3 ระบุและเรียกใช้ Menu ด้วย HTML

    ต่อเนื่องจากขั้นที่ 2 ให้ค้นหาโค้ด
    <div class='main-outer'>
    ถ้าเป็นแม่แบบรุ่นเก่าอาจจะพบโค้ดเป็น
    <div id='main'>
    หรือ
    <div id='main-wrapper'>


    ผมไม่พบ code ที่ว่าในแม่แบบของผมเลยครับ

  1. @ Chainarong Wanachaisong : ช่วยแจ้ง URL มาอีกครั้งครับเดี๋ยวผมจะช่วยดูให้ครับ

  1. http://nun-gfx.blogspot.com/

    ไม่เจอจจริงครับ ลองหลายรอบและ -*- ช่วยดูด้วยครับ ขอคุณมากครับ

  1. @ Chainarong Wanachaisong : ให้หาโคด้ด้านล่างนี้แทนครับ แล้ววาง HTML ในขั้นที่ 3 ลงไปก่อนหน้านั้น

    <div id='slidearea'>

  1. ขอบคุณมากคร้าฟฟ ^^

  1. ทำผิดขั้นตอนที่ 3 อะคะ

    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูปแบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: Open quote is expected for attribute "{1}" associated with an element type "href".
    เว็บนี้อะคะ http://hosting.save-hosting.com
    รบกวนช่วยดูให้ด้วยนะคะ

  1. @ save-hosting.com : สร้างโค้ดในขั้นที่ 3 ขึ้นมาใหม่อีกครั้งครับ เป็นข้อผิดพลาดเล็กน้อยแค่พิมพ์โค้ดบางตัวตกหล่นไปครับ

  1. อ่อ ขอบคุณนะค่ะ แก้ได้แล้วค่ะ

  1. ของผมทำตามทุกอย่างได้อยู่ครับแต่มันดันไปอยู่ซะชิดขอบจอทางซ้ายเลยอะครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ตรง Dropdown มันไม่ขึ้นอ่ะคับเราจะแก้ไขยังไงอ่ะคับ

  1. เว็ปผม หาไม่เจอเลยอะครับ ตรงข้อสาม ลองใส่ดูทีละช่วงก็แล้วไม่เห็นได้TT ช่วยดูให้ทีครับ

    http://homestores-design.blogspot.com/

  1. ง่า ผมทำไม่ได้อ่ะครับ มันติดให้แก่ไรไม่รู้อ่ะ เซ็งมากเลยครับ

    มันบอกว่
    า เราไม่สามารถบันทึกแม่แบบของคุณ

    โปรดแก้ไขข้อผิดพลาดด้านล่าง และส่งแม่แบบของคุณอีกครั้ง
    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูปแบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: The entity name must immediately follow the '&' in the entity reference.

  1. มันไม่ให้จัดเกับ อะ ครับ

  1. ผมทำได้ทุกอย่าง แล้วครับ มันแสดงผลเป็นรูปได้ถูกต้องด้วย แต่ที่น่าเจ็บ ใจและไม่รู้จะแก้ไขยังไง ก้คือ
    มันคลิกไม่ได้ครับ -*-

  1. url ผมครับ ทำตามแล้ว แต่เอาเม้าชี้ไม่มี ลิงค์ เพราะอะไรครับ ดูให้หน่อยครับ

  1. url ผมครับ http://tanaigeorge.blogspot.com/ ทำตามแล้ว แต่เอาเม้าชี้ไม่มี ลิงค์ เพราะอะไรครับ ดูให้หน่อยครับ

  1. ขอบคุณครับ

  1. พี่คับ error syntax ส่วน สคริปอ่าครับ

    $(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;);

    เกียวไหมครับว่าผมใช้ html 5

  1. เป็นเพราะอะไรครับที่มันไม่ยอม ดรอปดาวน์ทำทุกขั้นตอนออกมากก็เหมือนแบบพี่เลยครับช่วยหน่อยน่ะครับ

  1. อยากทราบวิธีอับโหลดรูปไปไว้ที่ bloger
    เเนะนำ bloger น้องใหม่
    http://zillul-azhar.blogspot.com/
    ฝากด้วยคับ
    ขอบคุณคับ

  1. เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML บรรทัดที่ 1732 คอลัมน์ 25: Open quote is expected for attribute "href" associated with an element type "a".

  1. บรรทัดที่ 1732 คือ &amp;lt;li&amp;gt;&amp;lt;a href=http://jquerymenu.hackublog.com&amp;gt;Get This Menu&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;/ul&amp;gt;
    &amp;lt;/div&amp;gt;

  1. ขอบคุณนะคะสำหรับความรู้ ลองทำ dropdown แล้ว ไม่มีอะไรเกิดขึ้นเลยค่ะ ช่วยแนะนำด้วยค่ะ
    http://kksukanlaya.blogspot.com

  1. http://cherrynetworkcafe.blogspot.com/
    กดแทบเมนูไม่ได้คะ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel