Banyak para pengguna Dreamweaver CS3, CS4 dan CS5
belum banyak tahu bagaimana caranya membuat sebuah halaman untuk Log In. Dalam
tutorial kali ini, Anda akan belajar membuat sebuah halaman untuk log in.
Sebelum masuk ke dalam tutorial ini, saya asumsikan
Anda telah memiliki memiliki tabel data MySQL yang menyimpan data username dan
password yang akan digunakan untuk log in dan Anda telah membuat Database Connection.
Berikut ini adalah contoh form yang akan digunakan.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”">
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>
<form id=”form1″ name=”form1″ method=”post” action=”">
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>
Maka
tampilannya akan tampak seperti gambar di bawah ini:
Menambahkan
fasilitas Log In user
Setelah fo
rm di atas telah jadi, berikut adalah langkah
selanjutnya:
rm di atas telah jadi, berikut adalah langkah
selanjutnya:- Klik Server Behaviors >
User Authentication > Log In User
- Window Log In User akan
keluar, isikan beberapa parameter berikut ini.
- Get input from form: form1
- Username field: username
- Password field: password
- Validate using connection:
……………..pilih koneksi yang telah Anda buat
- Table: administrator
(bisa jadi nama tabelnya berbeda. Dalam tutorial ini diasumsikan fasilitas
log in menggunakan data username dan password yang disimpan dalam tabel administrator).
- Username column: username
- Password column: password
- If log in succeds, go to: index.php,
link ini harus diisi untuk mengarahkan user ke halaman yang telah Anda
tentukan setelah melakukan Log In
- Go to previous URL (If exist),
ini dapat Anda beri tanda check. Maksud dari ini adalah jika Anda mencoba
memasukki halaman yang diproteksi, maka biasanya Anda akan diarahkan ke ke
halaman log in. Begitu Anda melakukan log in, maka Anda otomatis akan
diredirect ke halaman terproteksi tersebut
- If log in fails, go to: login.php,
ini artinya jika seseorang mengalami kegagalan log in mau diarahkan ke
halaman mana.
- Restrict access based on: Username
and password. Jika Anda memilih Username, password and access level,
pastikan tabel Administrator juga menyediakan kolom level administrator.
- Klik OK
- Dreamweaver otomatis akan
menambahkkan scripts Log In User di atas kode HTML yang sebelumnya Anda
buat.
Berikut
adalah kode akhirnya:
<?php
require_once(‘Connections/llll.php’); ?>
<?php
if (!function_exists(“GetSQLValueString”)) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = “”, $theNotDefinedValue = “”)
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
<?php
if (!function_exists(“GetSQLValueString”)) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = “”, $theNotDefinedValue = “”)
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists(“mysql_real_escape_string”)
? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case “text”:
$theValue = ($theValue != “”) ? “‘” . $theValue . “‘” : “NULL”;
break;
case “long”:
case “int”:
$theValue = ($theValue != “”) ? intval($theValue) : “NULL”;
break;
case “double”:
$theValue = ($theValue != “”) ? doubleval($theValue) : “NULL”;
break;
case “date”:
$theValue = ($theValue != “”) ? “‘” . $theValue . “‘” : “NULL”;
break;
case “defined”:
$theValue = ($theValue != “”) ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
?>
<?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) {
session_start();
}
case “text”:
$theValue = ($theValue != “”) ? “‘” . $theValue . “‘” : “NULL”;
break;
case “long”:
case “int”:
$theValue = ($theValue != “”) ? intval($theValue) : “NULL”;
break;
case “double”:
$theValue = ($theValue != “”) ? doubleval($theValue) : “NULL”;
break;
case “date”:
$theValue = ($theValue != “”) ? “‘” . $theValue . “‘” : “NULL”;
break;
case “defined”:
$theValue = ($theValue != “”) ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
?>
<?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) {
session_start();
}
$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
$_SESSION['PrevUrl'] = $_GET['accesscheck'];
}
if (isset($_GET['accesscheck'])) {
$_SESSION['PrevUrl'] = $_GET['accesscheck'];
}
if (isset($_POST['username'])) {
$loginUsername=$_POST['username'];
$password=$_POST['password'];
$MM_fldUserAuthorization = “”;
$MM_redirectLoginSuccess = “index.php”;
$MM_redirectLoginFailed = “login.php”;
$MM_redirecttoReferrer = true;
mysql_select_db($database_llll, $llll);
$loginUsername=$_POST['username'];
$password=$_POST['password'];
$MM_fldUserAuthorization = “”;
$MM_redirectLoginSuccess = “index.php”;
$MM_redirectLoginFailed = “login.php”;
$MM_redirecttoReferrer = true;
mysql_select_db($database_llll, $llll);
$LoginRS__query=sprintf(“SELECT
username, password FROM administrator WHERE username=%s AND password=%s”,
GetSQLValueString($loginUsername, “text”), GetSQLValueString($password, “text”));
GetSQLValueString($loginUsername, “text”), GetSQLValueString($password, “text”));
$LoginRS = mysql_query($LoginRS__query,
$llll) or die(mysql_error());
$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser) {
$loginStrGroup = “”;
$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser) {
$loginStrGroup = “”;
if (PHP_VERSION >= 5.1)
{session_regenerate_id(true);} else {session_regenerate_id();}
//declare two session variables and assign them
$_SESSION['MM_Username'] = $loginUsername;
$_SESSION['MM_UserGroup'] = $loginStrGroup;
//declare two session variables and assign them
$_SESSION['MM_Username'] = $loginUsername;
$_SESSION['MM_UserGroup'] = $loginStrGroup;
if (isset($_SESSION['PrevUrl'])
&& true) {
$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
}
header(“Location: ” . $MM_redirectLoginSuccess );
}
else {
header(“Location: “. $MM_redirectLoginFailed );
}
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
}
header(“Location: ” . $MM_redirectLoginSuccess );
}
else {
header(“Location: “. $MM_redirectLoginFailed );
}
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<form id=”form1″ name=”form1″ method=”POST” action=”<?php echo $loginFormAction; ?>”>
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>
<form id=”form1″ name=”form1″ method=”POST” action=”<?php echo $loginFormAction; ?>”>
<p><label>Username:<input type=”text” name=”username” id=”username” /></label> </p>
<p><label>Password: <input type=”text” name=”password” id=”password” /></label></p>
<p><input type=”submit” name=”submit” id=”submit” value=”Log In” /></p>
</form>
</body>
</html>
<html>
<head>
<meta
charset="utf-8">
<title>Drop
Down Menu Tutorial: Java Web Media</title>
<link
href="css/style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div
id="wrapper">
<div id="header">
<h1>Java Web Media</h1>
<p>Your web solution</p>
</div>
<div id="navigasi">Ini
Navigasi</div>
<div id="konten">
<h1>Java Web Media, Web Design Company
Based in Depok</h1>
<p>Or bends with the remover to remove.
Admit impediments; love is not love that looks on tempests and is never shaken;
let me not to the marriage of true minds. Love alters not with his brief hours
and weeks, within his bending sickle's compass come; it is the star to every
wand'ring bark. But bears it out even to the edge of doom. Oh, no, it is an
ever fixed mark or bends with the remover to remove.</p>
<p>That looks on tempests and is never
shaken; if this be error and upon me proved, I never writ, nor no man ever
loved. But bears it out even to the edge of doom. Oh, no, it is an ever fixed
mark that looks on tempests and is never shaken; which alters when it
alteration finds. Whose worth's unknown, although his height be
taken.</p>
</div>
<div id="footer"><a
href="http://www.javawebmedia.com">Web Design</a> by <a
href="http://www.javawebmedia.com">Java Web
Media</a></div>
</div>
</body>
</html>
File
CSS (style.css) di simpan dalam folder css
body {
background-color: #063;
margin: 0px;
padding: 0px;
}
form {
background-color: #E7E7E7;
padding: 20px;
border: thin solid #CECECE;
border-radius: 5px;
}
label {
font-size: 14px;
font-weight: bold;
text-transform: capitalize;
display: block;
}
input {
padding: 5px 10px;
}
h1 {
padding-bottom: 10px;
border-bottom: solid thin #D4D4D4;
font-size: 18px;
}
a, a:visited {
text-decoration: none;
}
a:hover {
color: #900;
}
#wrapper {
font-family: Tahoma, Geneva, sans-serif;
background-color: #FFF;
margin: auto;
padding: 20px 30px;
height: auto;
width: 960px;
border-right-width: 5px;
border-right-style: solid;
border-right-color: #CCC;
border-bottom-width: 5px;
border-left-width: 5px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #CCC;
border-left-color: #CCC;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
img {
max-width: 900px;
padding: 10px;
border: solid thin #F9F;
background-color: #FFC;
height: auto;
}
.warning {
background-color: #FCF;
color: #900;
padding: 5px 10px;
border: solid thin #900;
border-radius: 5px;
}
#header {
width: 960px;
height: 100px;
float: left;
font-size: 16px;
padding: 10px 0px;
margin-bottom: 10px;
}
#header h1 {
font-size: 20px;
color: #060;
border-bottom: none;
}
#navigasi {
float: left;
width: 960px;
height: 40px;
color: #FFF;
background-color: #333;
margin-bottom: 10px;
}
#konten {
width: 960px;
height: auto;
float: left;
padding-bottom: 20px;
margin-bottom: 10px;
border-bottom: solid thin #CCC;
}
#footer {
text-align: center;
font-size: 11px;
}
Membuat dropdown menu
menggunakan Spry Menu Bar Horizontal
Langkah
selanjutnya adalah bersiap membuat dropdown menu menggunakan fitur Spry Menu
Bar Horizontal yang disediakan oleh Dreamweaver (dalam tutorial ini digunakan
Dreamweaver CS5.5).
Java Web Media: Web Design Company in Depok
1.
Buka file dropdown.php menggunakan Dreamweaver, lalu ubah ke
mode Design View (lihat
gambar di atas).
2.
Seleksi tulisan “Ini Navigasi” yang ada dalam <div
id=”navigasi”> lalu hapus tulisan tersebut. Pastikan
kursor Anda masih di dalam area navigasi.
Java Web Media: Web Design Company in Depok
3.
Klik menu Insert
> Lay Out Objects > Spry Menu Bar
4.
Jendela Spry
Menu Bar akan keluar, lalu pilih opsi Horizontal lalu
klik OK. Otomatis
Dreamweaver akan menambahkan menu Spry Menu Bar Horizontal ke dalam halaman web
Anda.
5.
Jika Anda perhatikan, maka di bagian menu Properties (terletak
di bagian bawah Workspace Anda), Dreamweaver langsung menampilkan menu
pengaturan spry dropdown yang baru saja Anda buat.
6.
Dreamweaver otomatis akan membuat folder SpryAssets di
web root Anda yang berisi file-file spry menu bar ini.
Java Web Media: Web Design Company in Depok
Ada
beberapa hal yang harus Anda pahami dalam penggunaan Menu Bar Dreamweaver
ini, antara lain:
§ Parent,
adalah induk utama dari menu
§ Children,
adalah anak menu (ini akan menjadi menu drop down)
§ Grand
child , adalah sub menu dari menu drop down
§ Text,
adalah nama menu yang akan tampil di halaman web
§ Link,
adalah alamat website/link yang akan dituju ketika menu diklik. Secara default
Dreamweaver akan memberikan link tanda kres/pagar (#). Di sana juga terdapat
icon folder yang bisa Anda klik jika linknya adalah file.
§ Title,
akan menampilkan pop-up menu
§ Target,
adalah arah pembukaan link ketika menu dibuka.
NOTE: Di
dalam menu Parent,
Children dan Grand
children Anda akan melihat ikon plus/tambah (+) dan minus/kurang (-).
Tanda plus untuk menambah menu, submenu dan subsubmenu, sebaliknya tanda plus
untuk menghapus atau mengurangi. Di sana Anda juga akan melihat ikon ke arah
atas (↑) dan ke arah bawah (↓). Berfungsi untuk mengatur posisi menu, apakah di
atas atau di bawah.
Management
dropdown menu dan link
Anda
telah memahami fungsi dari masing-masing menu, maka langkah selanjutnya adalah
mengatur menu tersebut, berikut adalah langkah-langkahnya:
1.
Pada menu Parent klik
pada menu Item
1, lalu pada menu Text Anda akan melihat tulisan Item 1, ubah
tulisan tersebut menjadi Home dan link index.php.
Java Web Media: Web Desin Course in Depok
2.
Menu Home memiliki
anak/childrean Item 1.1 s/d Item 1.3. Anda tidak membutuhkannya. Klik pada
menu Item 1.1 lalu
klik ikon minus (-) di atasnya. Hapus ketiga anak/children tersebut dengan
mengklik tanda minus.
Java Web Media: Web Desin Course in Depok
3.
Lalu pada menu Item
2, ubah teksnya menjadi Products dan
link: products.php.
Java Web Media: Web Desin Course in Depok
4.
Masih pada parent menu Item 2 yang sudah berubah menjadi Products. Klik
pada menu Children,
lalu klik ikon plus (+) yang ada di atasnya. Tambahkan menu dan link yang Anda
sukai. Dalam contoh ini, submenu/children dari menu Products adalah Web Design dengan
link web-design.php, lalu Web
Programming dengan link web-prog.php dan Graphic Design dengan
link graphic.php.
5.
Lakukan hal sama pada menu Item 3. Ubah sesuai kemauan Anda
Java Web Media: Web Desin Course in Depok
6.
Pada menu Item
4 ubah menjadi Contact Us dengan
link contact.php
7.
Simpan kembali hasil pekerjaan Anda. Jika jendela Copy Dependent Files muncul,
klik OK.
8.
Lihat hasil pekerjaan Anda
Java Web Media: Web Desin Course in Depok
Hasil
dari dropdown menu yang Anda buat tentu belum memuaskan. Maka langkah
selanjutnya adalah mengubah tampilan spry menu bar melalu CSS-nya (disimpan
dalam fileSpryMenuBarHorizontal.css dalam
folder SpryAssets).
Mengubah tampilan Spry Menu Bar
Buka file SpryMenuBarHorizontal.css yang ada
dalam folder SpryAssets di web root Anda. Jika Anda
menggunakan Dreamweaver CS4 ke atas, maka link file bisa Anda lihat di
menu Related Documents.
Java Web Media: Web Desin Course in Depok
1.
Arahkan kursor Anda pada kode di skitar baris ke-50 pada
class ul.MenuBarHorizontal
ul. Lalu pada pengaturan width yang
semula bernilai 8.2em, ubah menjadi 12.2em.
Lakukan hal yang sama pengaturan width di baris ke-62 (pada class ul.MenuBarHorizontal ul li).
Java Web Media: Web Design Company in Depok
2.
Lalu pada baris ke-89 Anda akan melihat pengaturan CSS ini
(lihat gambar di atas). Lalu ubah sehingga menjadi seperti gambar di bawah:
Java Web Media: Web Design Company in Depok
3.
Simpan kembali hasil pekerjaan Anda. Anda telah berhasil membuat
drop down menu menggunakan Dreamweaver.
Java Web Media: Web Design Company in Depok
Berikut ini adalah source final
dari tutorial ini (javascript tidak disertakan):
dropdown.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Drop Down Menu Tutorial: Java Web Media</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Java Web Media</h1>
<p>Your web solution</p>
</div>
<div id="navigasi">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.php">Home</a> </li>
<li><a href="products.php" class="MenuBarItemSubmenu">Products</a>
<ul>
<li><a href="web-design.php">Web Design</a></li>
<li><a href="web-prog.php">Web Programming</a></li>
<li><a href="graphic.php">Graphic Design</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="client.php">Clients</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="corportate.php">Corporate</a>
<ul>
<li><a href="fashion.php">Fashion</a></li>
<li><a href="hospital.php">Hospital</a></li>
</ul>
</li>
<li><a href="#">Personal</a></li>
<li><a href="organ.php">Organisation</a></li>
</ul>
</li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div id="konten">
<h1>Java Web Media, Web Design Company Based in Depok</h1>
<p>Or bends with the remover to remove. Admit impediments; love is not love that looks on tempests and is never shaken; let me not to the marriage of true minds. Love alters not with his brief hours and weeks, within his bending sickle's compass come; it is the star to every wand'ring bark. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>
<p>That looks on tempests and is never shaken; if this be error and upon me proved, I never writ, nor no man ever loved. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; which alters when it alteration finds. Whose worth's unknown, although his height be taken.</p>
</div>
<div id="footer"><a href="http://www.javawebmedia.com">Web Design</a> by <a href="http://www.javawebmedia.com">Java Web Media</a></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
SpryMenuBarHorizontal.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 12.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 12.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #333;
padding: 10px 20px;
height: 20px;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
Tidak ada komentar:
Posting Komentar