Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ขอแนวทางการเขียนเมนู Arrow กรณีคลิกแล้วเปลี่ยนรูปทรงครับ

[PHP] ขอแนวทางการเขียนเมนู Arrow กรณีคลิกแล้วเปลี่ยนรูปทรงครับ

เริ่มหัวข้อใหม่

Kong

โพสกระทู้ ( 204 )
บทความ ( 0 )

เริ่มที่ ผมเขียน Responsive Menu ด้วย CSS ครับ

ul > แรก ได้มาหน้าตาแบบนี้

Code ตามนี้ครับ
Code (PHP)

.header-nav {
        position:relative;
        top:0;
        left:0;
        display:none;
        line-height:1;
        width:100%;
        box-shadow:0px 0px 2px #888;
    }
ul.mobilemenu li.level0 {
        padding:4px 0;
        border-bottom:solid #eee 1px;
        width: 100%;
        display: inline-block;
        position:relative;
    }

พอผมกดที่ Arrow สีเทาๆด้านขวาเมนู ที่ใส่โค้ด toggle ก็จะมี ul > Sub Menu โผล่ลงมาแบบนี้

ส่วนตัว Arrow เขียนโดย Css ครับ
Code (PHP)

        float:right;
display: inline-block;
border-left:12px solid #999;
border-bottom:6px solid transparent;
border-top:6px solid transparent;
position:absolute;
top:8px;
right:0;

ผมต้องการให้ประมาณว่า ถ้าคลิก 1 ครั้งให้ Arrow คว่ำหัวลง และ .header-nav .css display:block
Code (PHP)

        float:right;
display: inline-block;
border-top:12px solid #999;
border-left:6px solid transparent;
border-right:6px solid transparent;
position:absolute;
top:8px;
right:0;

พอคลิกอีกครั้ง Arrow ก็จะกลับสภาพเดิม และ .header-nav .css display:none

ตรรกะแรก ผมคิดว่า ถ้ากด Arrow แล้ว .header-nav .css display:block
ถ้า .header-nav .css display:block ให้หัวลูกศรคว่ำ
ถ้า .header-nav .css display:none ให้หัวลูกศรปกติ

ผมเข้าใจว่าต้องใช้คำสั่ง if แต่ไม่รู้จะเขียนยังไง
ลองเขียนแล้วได้ประมาณนี้แต่ใช้ไม่ได้
Code (PHP)

<script>
if ($('.header-nav').css({'display':'block'})
{
                'float':'right',
        'display':' inline-block',
        'border-top':'12px solid #999',
        'border-left':'6px solid transparent',
        'border-right':'6px solid transparent',
        'position':'absolute',
        'top':'8px',
        'right':'0'
}
else
{
                'float':'right',
        'display':' inline-block',
        'border-left':'12px solid #999',
        'border-top':'6px solid transparent',
        'border-bottom':'6px solid transparent',
        'position':'absolute',
        'top':'8px',
        'right':'0'
}
)
</script>

Tag : PHP, HTML/CSS, JavaScript

Date : 2017-02-15 14:10:48

By : Pla2todkrob

View : 696

Reply : 3

No. 1

Guest

ใช้ jquery addclass removeclass เอาครับ ง่ายดี

Date : 2017-02-15 14:16:25

By : tenten

No. 2

Kong

โพสกระทู้ ( 204 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : tenten เมื่อวันที่ 2017-02-15 14:16:25

รายละเอียดของการตอบ ::

แล้วถ้าคลิก แล้ว removeClass เดิม แล้ว addClass ใหม่เข้าไป
แล้วถ้าผมคลิกอีกครั้งให้ ให้กลับเป็นแบบเดิมมันต้องใช้คำสั่งอื่นเพิ่มไหมครับ

Date : 2017-02-16 09:19:55

By : Pla2todkrob

No. 3

Guest

ลองแบบนี้ดูครับ ผมเล่นในมือถือเทสโค้ดไม่ได้
.click(function(){
removeclass 2
addclass 1
}, function(){
removeclass 1
addclass2
});

Date : 2017-02-16 11:19:21

By : tenten

ค้นหาข้อมูล

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

Re : ขอแนวทางการเขียนเมนู Arrow กรณีคลิกแล้วเปลี่ยนรูปทรงครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038