ปรับ CSS ทำ drop down menuใน joomla
Moderator: mindphp
-
- PHP Newbie
- โพสต์: 4
- ลงทะเบียนเมื่อ: 17/09/2013 8:49 am
ปรับ CSS ทำ drop down menuใน joomla
กำลังพยายามปรับCSSเพื่อทำDrop Down Menuอยู่น่ะค่ะ คืออยากจะให้ในส่วนของsub-menuที่โชว์ลงมาเป็นพื้นสีขาวโล่งๆแล้วจะใส่เส้นใต้เป็นดอทเข้าไป แต่ไม่ว่าจะทำยังไงปุ่มรีๆที่น่าจะเป็นรูปแบบของเมนูหลักก็ไม่หายไป ไม่รู้ต้องแก้ตรงใหนน่ะค่ะ
#sgmenu ul.menu:after {clear: both;content: "";display: block; }
#sgmenu ul.menu {float: right; }
#sgmenu ul li {float: left;margin: 0 10px 0 0;position: relative; }
#sgmenu ul li a {background-image: -moz-linear-gradient(center bottom , #D4D3D6 27%, #DFDDDF 64%, #ECEBEB 82%) no-repeat;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969; }
#sgmenu ul li ul {position: absolute;visibility: hidden; }
#sgmenu ul li:hover ul {position:absolute;visibility: visible;}
#sgmenu ul li ul li {float: none; }
#sgmenu ul li ul li a {width: auto; }
#sgmenu ul li ul {background:#ffffff repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position:absolute;top:30px;width:150px;z-index:10; }
#sgmenu ul.menu li ul li a, #sgmenu ul.menu li ul li a:link, #sgmenu ul.menu li ul li a:visited {background: #fff; }
#sgmenu ul.menu li ul li a span {padding: 0 10px; }
#sgmenu ul.menu li ul li a:hover span {color: #000; }
#sgmenu ul.menu li a, #sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited {color: #343333;cursor: pointer;display: block;float: left;font-family:tahoma,TimesNew Roman;font-size: 14px;font-weight: 650;height: 28px;line-height: 28px;margin: 0;padding: 0 10px; }
#sgmenu ul.menu li a:hover, #sgmenu ul.menu li.active a {background: none repeat scroll 0 0 #ecebeb;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969; }
.newshold {height: 150px;overflow: hidden;position: absolute;right: 4px;top: 170px;width: 670px; }
.newshold h3 {color: #FF7800;font-family: Tahoma,Arial,sans-serif;font-size: 11px;margin: 0 0 10px 0; }
.newshold p {margin: 0 2px; }
#sgmenu ul li ul {left: 0;margin: 0 !important;position: absolute;top: 30px; }
#sgmenu ul li ul li {clear: both;float: none; }
.jicons-icons img {float: left;margin: 0 10px 0 0; }
.contact-contactinfo p {margin: 10px 0 0 0; }
input.inputbox, textarea.inputbox, .input-small {background: #ebebeb;border: 1px solid #a3a3a3;color: #000;margin: 0 0 10px 0; }
.cpathway {background: url(../images/bread_bg.png) top left no-repeat;color: #FBFBFB;font-size: 11px;height: 30px;line-height: 30px;margin: 0 auto 2px;text-indent: 25px;width: 980px; }
.cpathway a {color: #96C4E1; }
.cpathway a:hover {text-decoration: underline; }
.item h2, .item h3, .item h4, .items-leading h2 {margin: 0; }
.wrapcont {background: none repeat scroll 0 0 #FFFFFF;margin: 0 auto;}
#sgmenu ul.menu:after {clear: both;content: "";display: block; }
#sgmenu ul.menu {float: right; }
#sgmenu ul li {float: left;margin: 0 10px 0 0;position: relative; }
#sgmenu ul li a {background-image: -moz-linear-gradient(center bottom , #D4D3D6 27%, #DFDDDF 64%, #ECEBEB 82%) no-repeat;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969; }
#sgmenu ul li ul {position: absolute;visibility: hidden; }
#sgmenu ul li:hover ul {position:absolute;visibility: visible;}
#sgmenu ul li ul li {float: none; }
#sgmenu ul li ul li a {width: auto; }
#sgmenu ul li ul {background:#ffffff repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position:absolute;top:30px;width:150px;z-index:10; }
#sgmenu ul.menu li ul li a, #sgmenu ul.menu li ul li a:link, #sgmenu ul.menu li ul li a:visited {background: #fff; }
#sgmenu ul.menu li ul li a span {padding: 0 10px; }
#sgmenu ul.menu li ul li a:hover span {color: #000; }
#sgmenu ul.menu li a, #sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited {color: #343333;cursor: pointer;display: block;float: left;font-family:tahoma,TimesNew Roman;font-size: 14px;font-weight: 650;height: 28px;line-height: 28px;margin: 0;padding: 0 10px; }
#sgmenu ul.menu li a:hover, #sgmenu ul.menu li.active a {background: none repeat scroll 0 0 #ecebeb;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969; }
.newshold {height: 150px;overflow: hidden;position: absolute;right: 4px;top: 170px;width: 670px; }
.newshold h3 {color: #FF7800;font-family: Tahoma,Arial,sans-serif;font-size: 11px;margin: 0 0 10px 0; }
.newshold p {margin: 0 2px; }
#sgmenu ul li ul {left: 0;margin: 0 !important;position: absolute;top: 30px; }
#sgmenu ul li ul li {clear: both;float: none; }
.jicons-icons img {float: left;margin: 0 10px 0 0; }
.contact-contactinfo p {margin: 10px 0 0 0; }
input.inputbox, textarea.inputbox, .input-small {background: #ebebeb;border: 1px solid #a3a3a3;color: #000;margin: 0 0 10px 0; }
.cpathway {background: url(../images/bread_bg.png) top left no-repeat;color: #FBFBFB;font-size: 11px;height: 30px;line-height: 30px;margin: 0 auto 2px;text-indent: 25px;width: 980px; }
.cpathway a {color: #96C4E1; }
.cpathway a:hover {text-decoration: underline; }
.item h2, .item h3, .item h4, .items-leading h2 {margin: 0; }
.wrapcont {background: none repeat scroll 0 0 #FFFFFF;margin: 0 auto;}
- แนบไฟล์
-
- Drop Down Menu.jpg (260.72 KiB) Viewed 2182 times
- tsukasaz
- PHP VIP Members
- โพสต์: 21912
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
Re: ปรับCSSทำ drop down menuในjoomla
หมายถึงตัว box-shadow หรือเปล่าครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
- PHP Newbie
- โพสต์: 4
- ลงทะเบียนเมื่อ: 17/09/2013 8:49 am
Re: ปรับCSSทำ drop down menuในjoomla
ตรงที่ดร็อปดาวเมนู ภาคเหนือ ภาคกลาง...อยากให้เงาโค้งๆหายไปเหลือแค่พื้นสีขาวน่ะค่ะ
- tsukasaz
- PHP VIP Members
- โพสต์: 21912
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
Re: ปรับCSSทำ drop down menuในjoomla
เอา box-shadow ออกครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
- PHP Newbie
- โพสต์: 4
- ลงทะเบียนเมื่อ: 17/09/2013 8:49 am
Re: ปรับCSSทำ drop down menuในjoomla
เอาออกจากแถว #Sgmenu ul li ul ใช่มั๊ยคะ เอาออกแล้วมันก็ไม่หายน่ะค่ะ >…< เหมือนมันเป็นผลมาจากแถว #sgmenu ul li
a น่ะค่ะ แต่แถวนี้มันควบคุมรูปแบบของเมนูหลักอยู่ ถ้าเอาออกเงาของหัวเมนูหลักก็จะหายไปด้วย พยายามใส่ no-repeat ก็ไมหายเพิ่งเริ่มเขียนเลยไม่รู้จะแก้ตรงใหนดีน่ะค่ะ >…<
a น่ะค่ะ แต่แถวนี้มันควบคุมรูปแบบของเมนูหลักอยู่ ถ้าเอาออกเงาของหัวเมนูหลักก็จะหายไปด้วย พยายามใส่ no-repeat ก็ไมหายเพิ่งเริ่มเขียนเลยไม่รู้จะแก้ตรงใหนดีน่ะค่ะ >…<
- tsukasaz
- PHP VIP Members
- โพสต์: 21912
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
Re: ปรับCSSทำ drop down menuในjoomla
งั้นลองแก้ จาก #sgmenu ul li a เป็น #sgmenu ul.menu > li > aloony22 เขียน:เอาออกจากแถว #sgmenu ul li ul ใช่มั๊ยคะ เอาออกแล้วมันก็ไม่หายน่ะค่ะ >…< เหมือนมันเป็นผลมาจากแถว #sgmenu ul li
a น่ะค่ะ แต่แถวนี้มันควบคุมรูปแบบของเมนูหลักอยู่ ถ้าเอาออกเงาของหัวเมนูหลักก็จะหายไปด้วย พยายามใส่ no-repeat ก็ไมหายเพิ่งเริ่มเขียนเลยไม่รู้จะแก้ตรงใหนดีน่ะค่ะ >…<
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
- PHP Newbie
- โพสต์: 4
- ลงทะเบียนเมื่อ: 17/09/2013 8:49 am
Re: ปรับCSSทำ drop down menuในjoomla
แก้ก็ยังไม่หายน่ะค่ะ >.< เอา htmlมาให้ดูด้วยค่ะ ใช้joomlaน่ะค่ะ ขอบคุณมากๆในความกรุณาค่ะ
<ul class="menu">
<li id="item-102" class="current active"><a href="/joomla/" ><span>หน้าหลัก</span></a></li><li id="item-103"><a href="/joomla/index.php/2013-09-05-09-19-10" ><span>โรงแรม</span></a></li><li id="item-106"><a href="/joomla/index.php/air-ticket" ><span>ตั๋วเครื่องบิน</span></a></li><li id="item-104" class="parent"><a href="/joomla/index.php/2013-09-05-09-21-44" ><span>ทัวร์ในประเทศ</span></a><ul><li id="item-120"><a href="/joomla/index.php/2013-09-05-09-21-44/north" ><span>ภาคเหนือ</span></a></li><li id="item-121"><a href="/joomla/index.php/2013-09-05-09-21-44/middle" ><span>ภาคกลาง</span></a></li><li id="item-122"><a href="/joomla/index.php/2013-09-05-09-21-44/east" ><span>ภาคตะวันออก</span></a></li><li id="item-123"><a href="/joomla/index.php/2013-09-05-09-21-44/south" ><span>ภาคใต้</span></a></li></ul></li><li id="item-105"><a href="/joomla/index.php/2013-09-05-09-22-46" ><span>ทัวร์ต่างประเทศ</span></a></li><li id="item-107"><a href="/joomla/index.php/private-tour" ><span>ทัวร์ส่วนตัว</span></a></li><li id="item-109"><a href="/joomla/index.php/summer-school" ><span>คอร์สเรียนภาษา</span></a></li><li id="item-108"><a href="/joomla/index.php/contact-us" ><span>ติดต่อเรา</span></a></li></ul>
<ul class="menu">
<li id="item-102" class="current active"><a href="/joomla/" ><span>หน้าหลัก</span></a></li><li id="item-103"><a href="/joomla/index.php/2013-09-05-09-19-10" ><span>โรงแรม</span></a></li><li id="item-106"><a href="/joomla/index.php/air-ticket" ><span>ตั๋วเครื่องบิน</span></a></li><li id="item-104" class="parent"><a href="/joomla/index.php/2013-09-05-09-21-44" ><span>ทัวร์ในประเทศ</span></a><ul><li id="item-120"><a href="/joomla/index.php/2013-09-05-09-21-44/north" ><span>ภาคเหนือ</span></a></li><li id="item-121"><a href="/joomla/index.php/2013-09-05-09-21-44/middle" ><span>ภาคกลาง</span></a></li><li id="item-122"><a href="/joomla/index.php/2013-09-05-09-21-44/east" ><span>ภาคตะวันออก</span></a></li><li id="item-123"><a href="/joomla/index.php/2013-09-05-09-21-44/south" ><span>ภาคใต้</span></a></li></ul></li><li id="item-105"><a href="/joomla/index.php/2013-09-05-09-22-46" ><span>ทัวร์ต่างประเทศ</span></a></li><li id="item-107"><a href="/joomla/index.php/private-tour" ><span>ทัวร์ส่วนตัว</span></a></li><li id="item-109"><a href="/joomla/index.php/summer-school" ><span>คอร์สเรียนภาษา</span></a></li><li id="item-108"><a href="/joomla/index.php/contact-us" ><span>ติดต่อเรา</span></a></li></ul>
- tsukasaz
- PHP VIP Members
- โพสต์: 21912
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
Re: ปรับ CSS ทำ drop down menuใน joomla
CSS
HTML
โค้ด: เลือกทั้งหมด
#sgmenu ul.menu:after {
clear: both;
content: "";
display: block;
}
#sgmenu ul.menu {
float: right;
}
#sgmenu ul li {
float: left;
margin: 0 10px 0 0;
position: relative;
}
#sgmenu ul.menu > li > a {
background-image: -moz-linear-gradient(center bottom , #D4D3D6 27%, #DFDDDF 64%, #ECEBEB 82%) no-repeat;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
#sgmenu ul li ul {
position: absolute;
visibility: hidden;
}
#sgmenu ul li:hover ul {
position:absolute;
visibility: visible;
}
#sgmenu ul li ul li {
float: none;
}
#sgmenu ul li ul li a {
width: auto;
}
#sgmenu ul li ul {
background:#ffffff repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position:absolute;
top:30px;
width:150px;
z-index:10;
}
#sgmenu ul.menu li ul li a,
#sgmenu ul.menu li ul li a:link,
#sgmenu ul.menu li ul li a:visited {
background: #fff;
}
#sgmenu ul.menu li ul li a span {
padding: 0 10px;
}
#sgmenu ul.menu li ul li a:hover span {
color: #000;
}
#sgmenu ul.menu li a,
#sgmenu ul.menu li a:link,
#sgmenu ul.menu li a:visited {
color: #343333;
cursor: pointer;
display: block;
float: left;
font-family:tahoma,TimesNew Roman;
font-size: 14px;
font-weight: 650;
height: 28px;
line-height: 28px;
margin: 0;
padding: 0 10px;
}
#sgmenu ul.menu > li > a:hover,
#sgmenu ul.menu > li.active > a {
background: none repeat scroll 0 0 #ecebeb;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
.newshold {
height: 150px;
overflow: hidden;
position: absolute;
right: 4px;
top: 170px;
width: 670px;
}
.newshold h3 {
color: #FF7800;
font-family: Tahoma,Arial,sans-serif;
font-size: 11px;
margin: 0 0 10px 0;
}
.newshold p {
margin: 0 2px;
}
#sgmenu ul li ul {
left: 0;
margin: 0 !important;
position: absolute;
top: 30px;
}
#sgmenu ul li ul li {
clear: both;float: none;
}
.jicons-icons img {
float: left;
margin: 0 10px 0 0;
}
.contact-contactinfo p {
margin: 10px 0 0 0;
}
input.inputbox,
textarea.inputbox,
.input-small {
background: #ebebeb;
border: 1px solid #a3a3a3;
color: #000;
margin: 0 0 10px 0;
}
.cpathway {
background: url(../images/bread_bg.png) top left no-repeat;
color: #FBFBFB;
font-size: 11px;
height: 30px;
line-height: 30px;
margin: 0 auto 2px;
text-indent: 25px;
width: 980px;
}
.cpathway a {
color: #96C4E1;
}
.cpathway a:hover {
text-decoration: underline;
}
.item h2,
.item h3,
.item h4,
.items-leading h2 {
margin: 0;
}
.wrapcont {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
}
โค้ด: เลือกทั้งหมด
<ul class="menu">
<li id="item-102" class="current active"><a href="/joomla/" ><span>หน้าหลัก</span></a></li>
<li id="item-103"><a href="/joomla/index.php/2013-09-05-09-19-10" ><span>โรงแรม</span></a></li>
<li id="item-106"><a href="/joomla/index.php/air-ticket" ><span>ตั๋วเครื่องบิน</span></a></li>
<li id="item-104" class="parent"><a href="/joomla/index.php/2013-09-05-09-21-44" ><span>ทัวร์ในประเทศ</span></a>
<ul><li id="item-120"><a href="/joomla/index.php/2013-09-05-09-21-44/north" ><span>ภาคเหนือ</span></a></li>
<li id="item-121"><a href="/joomla/index.php/2013-09-05-09-21-44/middle" ><span>ภาคกลาง</span></a></li>
<li id="item-122"><a href="/joomla/index.php/2013-09-05-09-21-44/east" ><span>ภาคตะวันออก</span></a></li>
<li id="item-123"><a href="/joomla/index.php/2013-09-05-09-21-44/south" ><span>ภาคใต้</span></a></li>
</ul>
</li>
<li id="item-105"><a href="/joomla/index.php/2013-09-05-09-22-46" ><span>ทัวร์ต่างประเทศ</span></a></li>
<li id="item-107"><a href="/joomla/index.php/private-tour" ><span>ทัวร์ส่วนตัว</span></a></li>
<li id="item-109"><a href="/joomla/index.php/summer-school" ><span>คอร์สเรียนภาษา</span></a></li>
<li id="item-108"><a href="/joomla/index.php/contact-us" ><span>ติดต่อเรา</span></a></li>
</ul>
- แนบไฟล์
-
- 18-9-2556 10-39-37.png (9.75 KiB) Viewed 2165 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
- PHP Newbie
- โพสต์: 3
- ลงทะเบียนเมื่อ: 19/11/2013 2:44 pm
Re: ปรับ CSS ทำ drop down menuใน joomla
ขอบคุณนะครับผม
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้งาน drop ฬนการรับ element ที่ใช้ drag เพื่อทำ event drop ด้วย jquery UI
โดย ewqolf » 27/12/2022 4:54 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 956 แสดง
-
โพสต์ล่าสุด โดย ewqolf
27/12/2022 4:54 pm
-
-
-
โพสต์ใหม่ การเพิ่ม Menu ย่อย Drop down ใน Joomla
โดย Patipat » 13/06/2019 4:09 pm » ใน Mindphp Videoman - 0 ตอบกลับ
- 3509 แสดง
-
โพสต์ล่าสุด โดย Patipat
13/06/2019 4:09 pm
-
-
-
โพสต์ใหม่ อยากรู้วิธีทำ Menu Drop Down ใน Joomla ครับ
โดย Before Dong » 16/08/2017 10:12 am » ใน Joomla Development - 3 ตอบกลับ
- 1312 แสดง
-
โพสต์ล่าสุด โดย Minanda
03/11/2017 11:38 pm
-
-
-
โพสต์ใหม่ Q - ทำ Drop Down ในหน้าผู้ดูแลระบบของโมดูล
โดย Parichat » 20/04/2018 1:22 pm » ใน Joomla Development - 13 ตอบกลับ
- 3653 แสดง
-
โพสต์ล่าสุด โดย tsukasaz
23/04/2018 3:57 pm
-
-
-
โพสต์ใหม่ สอบถามปุ่ม drop-down กดไม่ได้
โดย Thanapoom1514 » 02/03/2023 11:17 am » ใน Programming - PHP - 3 ตอบกลับ
- 721 แสดง
-
โพสต์ล่าสุด โดย Thanapoom1514
07/03/2023 10:26 am
-
-
- 3 ตอบกลับ
- 9736 แสดง
-
โพสต์ล่าสุด โดย Forexduck
02/06/2022 11:39 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 44