At this time Dreamweaver tutorial I will try to explain how to create a simple drop down menus and simple to get and easy to learn, and may later be developed by potential web developers and web designers who stopped at ilmugrafis website. A little explanation, Dropdown Menu is a menu that when we highlight it with the mouse then the menu will bring up another menu (sub menu). Currently, many already use Drop Down menu for some reason looks more modern and sophisticated, adding to the beauty of a website to save space / space on his website for a drop down sub menu we can give hidden in the menu on our website.
Ok, let's try to make it:
1. Open the application dreamweaver us, here I am using Dreamweaver 8 on my computer because it is lightweight. For those who already use Dreamweaver CS5 CS6 even take it because of how it can be applied to all dreamweaver
(Start >> all programs >> Dreamweaver)
2. create a CSS file, how. Click File >> New >> General Tab >> Basic Page >> Css
write CSS code below
/ * CSS for drop down menu starts * /
ul
{
list-style: none;
padding: 0px;
margin: 0px
}
ul li
{
display: inline;
float: left;
}
ul li a
{
color: # ffffff;
background: # 990E00;
margin-right: 5px;
font-weight: bold;
font-size: 12px;
font-family: verdana;
text-decoration: none;
display: block;
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border: 1px solid # 560E00;
}
ul li a: hover
{
color: # cccccc;
background: # 560E00;
font-weight: bold;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border: 1px solid # 000000;
}
ul li.sublinks a
{
color: # 000000;
background: # f6f6f6;
border-bottom: 1px solid # cccccc;
font-weight: normal;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
margin-top: 2px;
}
li.sublinks ul a: hover
{
color: # 000000;
background: # FFEFC6;
font-weight: normal;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
}
ul li.sublinks
{
display: none;
}
/ * CSS drop down menu simple end * /
wow a lot right, just calm CSS copy and paste this into your newly created CSS with Dreamweaver,
save and name it "dropdown.css"
3. Now create a web page, just use HTML to make it more simple, because if you need help choosing PHP format Sever for mengoprasikannya
css similar way before, but the sequence File >> New >> Basic Page >> Html >> Ok
css now call we make, how:
click browse, then pick "dropdown.css", OK
Well after the above steps correctly then there will be code like this in our html page.
that means style (CSS) that we make has entered into html page
4. Enter this code html code to us. select code
<- Started the First Menu ->
<ul>
<li> <a href="#" class="dropdown"> Menu One </ a> </ li>
<li class="sublinks">
<a href="#"> Link 1 </ a>
<a href="#"> Link 2 </ a>
<a href="#"> Link 3 </ a>
<a href="#"> Link 4 </ a>
<a href="#"> Link 5 </ a>
</ Li>
</ Ul>
<- Completed the First Menu ->
<- Second Menu Begins ->
<ul>
<li> <a href="#" class="dropdown"> Menu Two </ a> </ li>
<li class="sublinks">
<a href="#"> Link 1 </ a>
<a href="#"> Link 2 </ a>
<a href="#"> Link 3 </ a>
<a href="#"> Link 4 </ a>
<a href="#"> Link 5 </ a>
</ Li>
</ Ul>
<- Completed the Second Menu ->
<- And so on ->
copy and paste the code above in the section between <body> .... </ Body> tag for those who do not understand this look like HTML tutorial LEARNING WEBSITE
4. Add JQuery Script, wow what else is it? Quiet ... more details click JQuery Introduction to Website
write code, Put under the Title tag
after that add this Javascript code,
put it in the tag JQuery
<script type="text/javascript">
$ (Function () {
$ ('. Dropdown'). MouseEnter (function () {
$ ('. Sublinks'.) Stop (false, true). Hide ();
var submenu = $ (this). parent (). next ();
submenu.css ({
position: 'absolute',
top: $ (this). offset (). top + $ (this). height () + 'px',
left: $ (this). offset (). left + 'px',
ZIndex: 1000
});
submenu.stop (). slideDown (300);
submenu.mouseleave (function () {
$ (This). SlideUp (300);
});
});
});
</ Script>
this picture
Completed, and the results are about - something like this
Image: Drop down menu simple
Drop down menu has been created, See Demo Drop Down menu here. You can change the menu - the menu as you wish by editing the text "Menu One" or "Menu Two" and a sub menu "Link 1" up to "Link 5" in the HTML coding page, please expand as desired. See you in another tutorial website. Source code drop down menu you can download here. Thank you, may be useful. If any suggestions or questions please contact me. Thank you, may be useful
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar