Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > พอดีผมเขียน menu แบบ position fixed และให้ scroll เลื่อนได้เฉพาะตัว menu ด้วย height:99vh


[PHP] พอดีผมเขียน menu แบบ position fixed และให้ scroll เลื่อนได้เฉพาะตัว menu ด้วย height:99vh

 
Topic : 127268



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



สถานะออฟไลน์
Facebook


1

จากรูปผมได้ออกแบบโดยแบ่งออกเป็น 2 ส่วน
ส่วนที่ 1

1

ผมทำการ fixed ให้อยู่ด้านบนสุด โดยเป็น main ในการเรียก

Code (PHP)
1..header-container .header-mobile .header-mobile-container {
2.        position:fixed;
3.        width:100%;
4.        background:#000;
5.        height: 60px;
6.    }


เมื่อกดที่ menu แฮมเบอเกอร์ กดจะเรียกส่วนที่ 2 มา ด้วย java script

ให้ Code (JavaScript)
1.$('.nav-mobile-container').css('display','block');


Code (PHP)
01..nav-mobile-container {
02.        display:none;
03.        width:100%;
04.        line-height:0;
05.        top:60px;
06.        position: fixed;
07.         
08.    }
09.    .nav-container {
10.        width:100%;
11.    }
12.    .nav-contain-size {
13.        width:100%;
14.    }
15.    .navbar {
16.        width:100%;
17.    }
18.    .navbar-inner {
19.        width:100%;
20.        position:relative;
21.        display:block;
22.        line-height:0;
23.    }
24.    .navbar-inner ul.mobilemenu {
25.        position:relative;
26.        display:inline-block;
27.        line-height:0;
28.        width:100%;
29.        background:#000;
30.        overflow-x: hidden;
31.        overflow-y: auto;
32.        height: 99vh;
33.    }


ซึ่งปัญหาที่ติดคือ
เวลากด Arrow

2

แล้วมันก็สามารถเลื่อนขึ้น-ลง ได้แต่มีส่วนล่างที่หลุดไป
1
3
2
4



Tag : PHP, HTML, CSS

Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2017-04-19 14:36:56 By : Pla2todkrob View : 1973 Reply : 9
 

 

No. 1



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



สถานะออฟไลน์
Facebook

ยังไม่ได้เลย ฮือๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-20 13:34:23 By : Pla2todkrob
 

 

No. 2

Guest


แล้วถ้ากด arrow ให้มันเก็บเมนูย่อย

เมนู store มันไม่คืนมา หรือครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-20 14:01:07 By : 9nonameman
 

 

No. 3



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



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 2 เขียนโดย : 9nonameman เมื่อวันที่ 2017-04-20 14:01:07
รายละเอียดของการตอบ ::
คืนครับ เหมือนว่าตอนที่กด arrow เรียกเมนูย่อย แล้วมันสไลหลุดจอไปครับ ทั้งๆที่เลื่อนลงมาแล้ว

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-21 09:01:36 By : Pla2todkrob
 

 

No. 4

Guest


ตอบความคิดเห็นที่ : 3 เขียนโดย : Pla2todkrob เมื่อวันที่ 2017-04-21 09:01:36
รายละเอียดของการตอบ ::
ลองทดสอบ บนมือถือจริง ๆ แล้วใช่ไหมครับ ไม่ทราบว่ามีลิงค์ เข้าไปดูไหมครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-21 09:36:38 By : 9nonameman
 

 

No. 5



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



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 4 เขียนโดย : 9nonameman เมื่อวันที่ 2017-04-21 09:36:38
รายละเอียดของการตอบ ::
http://lifeford.dcash-mcic.com/

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-21 09:46:09 By : Pla2todkrob
 

 

No. 6

Guest


css บรรทัดที่ 1285 เปลี่ยนค่า height จาก 99 เป็นระหว่าง 90-92 ดูครับ

Code (PHP)
01..navbar-inner ul.mobilemenu {
02.    background: #000 none repeat scroll 0 0;
03.    display: inline-block;
04.    height: 99vh;
05.    line-height: 0;
06.    overflow-x: hidden;
07.    overflow-y: auto;
08.    padding: 0 2%;
09.    position: relative;
10.    width: 100%;
11.}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-21 10:35:21 By : 9nonameman
 

 

No. 7



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



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 6 เขียนโดย : 9nonameman เมื่อวันที่ 2017-04-21 10:35:21
รายละเอียดของการตอบ ::
อ๋อ ได้แล้วขอบคุณมากๆครับ
จากแนวคิดผมเอามาปรับแต่งนิดหน่อย ให้มันพอดีแบบเป๊ะๆ
Code (PHP)
1.height: calc(100vh - 60px);

แบบนี้
ขอบคุณอีกครั้งครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-04-21 11:40:03 By : Pla2todkrob
 

 

No. 8

Guest


ไม่ทราบว่าตรงไหนคือโค้ดของ PHP ที่เขียนไว้คะ เพราะที่ดูอันนั้นมัน CSS
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-01-16 20:33:08 By : bambies
 

 

No. 9



โพสกระทู้ ( 4,170 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 8 เขียนโดย : bambies เมื่อวันที่ 2020-01-16 20:33:08
รายละเอียดของการตอบ ::
รบกวนดูกระทู้ด้วยครับ 2017 ป่านนี้คงได้แล้วครับ กระทู้ใหม่ที่มีปัญหา drop หมดโน๊ะ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-01-16 22:40:34 By : Genesis™
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : พอดีผมเขียน menu แบบ position fixed และให้ scroll เลื่อนได้เฉพาะตัว menu ด้วย height:99vh
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่