ดาวน์โหลดฟรี

ดาวน์โหลด Simple CSS3 Dropdown Menu
เข้าชมทั้งหมด : 579 ครั้ง | ดาวน์โหลด : 132 ครั้ง | หมวด : Menu & Navigation


Simple CSS3 Dropdown Menu

As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, People usually add the effect using some images but this example  that one using pure CSS.

 

Drop Down Technique


To create drop down menu like the demo we can use a div for the menu container and an unordered list for the menu. Wrap the unordered list on the div and hide them, we’ll only show the menu when user hovering the div.

As you mention above, the unordered list (the menu) is hidden, positioned inside the div and under the text “Please choose following menu”. So when the user hover the menu container the menu will have sub menu below it.

 

The Object and Its Style


As I said above the menu container will contains unordered list as the menu, so we will wrap the unordered list with the div :

01 <div class="drop-menu">
02  <span class="plus">+</span> &nbsp; Please choose following menu
03  <ul class="sub-menu">
04   <li>
06     <img src="images/rss.png" border="0" alt="rss" /> Subscribe RSS Feed
07    </a>
08   </li>
09   <li>
11     <img src="images/email.png" border="0" alt="email" /> Subscribe Email Subscription
12    </a>
13   </li>
14   <li>
15    <a href="http://twitter.com/hdytsgt">
16     <img src="images/twitter.png" border="0" alt="twitter"/> Follow My Twitter
17    </a>
18   </li>
19  </ul>
20 </div>

 

The important thing is we must fixed the menu container’s height (class name : drop-menu) so no matter how much list (class name : sub-menu) element inside, its height will not change. We can also make it more cute by set up its padding, font size, border and also the cursor property.

01 .drop-menu {
02  display: block;
03  margin-right: auto;
04  margin-left: auto;
05  text-align: left;
06  padding: 10px 10px;
07  font-size: 22px;
08  height: 25px;
09  max-height: 25px;
10  width: 400px;
11  background: #fff;
12  cursor: pointer;
13  border: 1px solid #f6f0e4;
14 }

ข้อมูลการดาวน์โหลด Simple CSS3 Dropdown Menu

เข้าชมทั้งหมด

: 579 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 132 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 6.4 kb

หมวดหมู่

: Menu & Navigation

แนะนำโปรแกรมที่เกี่ยวข้อง


jQuery Drop down Menu


Features Full cross-browser compatibility Fully accessible even when javascript is turned off, as a pure css menu Search engines optimized Clear unordered list (LI and UL HTML tags) structure of jQuery…
เข้าชมทั้งหมด : 775 ครั้ง | ดาวน์โหลด : 206 ครั้ง | หมวด : Menu & Navigation

multilevel tree menu jQuery


This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! JS call for the menu:
เข้าชมทั้งหมด : 789 ครั้ง | ดาวน์โหลด : 153 ครั้ง | หมวด : Menu & Navigation

slide extra content or a navigation tool(jQuery )


This is a jQuery component to build a sliding panel where you can load content or navigation structure via
เข้าชมทั้งหมด : 673 ครั้ง | ดาวน์โหลด : 166 ครั้ง | หมวด : Menu & Navigation

DropDown CSS Menu


The structure of our menu is based on a simple un-ordered list.
เข้าชมทั้งหมด : 686 ครั้ง | ดาวน์โหลด : 166 ครั้ง | หมวด : Menu & Navigation

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles wit


How it works Required markup The menu plugin was written with progressive enhancement in mind: first mark up a basic and functional unordered list of links,
เข้าชมทั้งหมด : 751 ครั้ง | ดาวน์โหลด : 156 ครั้ง | หมวด : Menu & Navigation

หมวดหมู่โปรแกรม

 เกมส์
 ไดร์ฟเวอร์
 โปรแกรมด้านความปลอดภัย
 บราวเซอร์และปลั๊กอิน
 โปรแกรมด้านธุรกิจ
 โปรแกรมการติดต่อสื่อสาร
 เครื่องมือ สำหรับนักพัฒนา
 โปรแกรมสำหรับจัดการภาพ
 โปรแกรมเพื่อการศึกษา
 โปแกรมการออกแบบกราฟฟิก
 โปรแกรมด้านอินเตอร์เน็ต
 โปรแกรมสำหรับ iTunes & iPod
 โปรแกรมสำหรับ MP3 & Audio
 โปรแกรมด้านเครือข่าย
 โปรแกรมทั่วไป & OS
 โปรแกรมจัดการวีดีโอ&ภาพยนต์
 เว็บไซต์สำเร็จรูป (CMS)

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form