Forum Sementara Putera.com

Bersama kita perkemaskan forum ini sementara forum asal dalam pemulihan.

Forum putera dah kembali. Masalah sudah berjaya diselesaikan. Sila lawati http://forum.putera.com/tanya


    Mega Drop Down Menus with CSS & jQuery in wordpress

    Share

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 09, 2009 6:40 am

    Aku tengah dalam proses nak buat dropdown menu...
    then i try follow satu tutorial dr sbuah laman web kat tenet...
    tapi mcm ada problem jer...

    Ini website aku (Edit: url removed)

    Mega dropdown menu tuh aku amik dari tutorial nih:

    http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

    Tapi after aku masukkan semua code2 dia...
    tak keluar lak...
    missing or just blank camtuh jer...

    nih code style.php (code css tuh aku masukkan kat bawah sekali...aku ada tanda dengan line panjang untuk mudahkan korg cari):

    UPDATE ON 16 DISEMBER (latest)

    Code:
    <?php
    require_once( dirname(__FILE__) . '../../../../wp-config.php');
    require_once( dirname(__FILE__) . '/functions.php');
    header("Content-type: text/css");
     
    global $options;
     
    foreach ($options as $value) {
            if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_option( $value['id'] ); } }


    $lineheight = $flex_post_size + 4;
    $commentswidth = $flex_content_width - 30;
    $commenttextwidth = $flex_content_width -20;
    $pagewidth = $flex_blog_width -5;
    $featwidgets = ($flex_blog_width - (($flex_feat_widgets - 1) * 30) - 50) / $flex_feat_widgets;
    $footwidgets = ($flex_blog_width - (($flex_foot_widgets - 1) * 30) - 50) / $flex_foot_widgets;
    $footerwidth = $flex_blog_width;
    $titlelineheight = $flex_title_size +4;
    $navwidth = $flex_blog_width - 8;
    $searchbox = $flex_search_margin;
    $sidebar = $flex_blog_width - $flex_content_width - 15;
    $titletoppadding = $flex_head_height/4;
    $rsstoppadding = $flex_head_height/2;

    ?>
    /*--- This is the CSS that controls the theme. It's pretty sloppy, but try running php tags through CSS Tidy and see what happens. ---*/

    html {
       margin: 0px;
       min-height: 100%;
    }

    body {
       margin:0px;
       padding:0px;
       background-color: #<?php echo $flex_page_backgroundcolor; ?>;
       min-height: 100%;   
    }
    <?php if ($flex_blog_bgimage == "no background image") { ?>
    <?php } else { ?>
    body {
       background-image: url('<?php bloginfo('template_url'); ?>/images/backgrounds/<?php echo $flex_blog_bgimage; ?>');
       background-repeat: repeat;
       background-position: center top;
    }
    <?php } ?>

    a:link, a:visited, a:active a:focus {
       -moz-outline-style:none;
    }

    a:hover {
       -moz-outline-style:none;
    }

    h1, h2, h3, h4 {
       font-family: <?php echo $flex_title_font; ?>, Helvetica, sans-serif;
    }

    h2.pagetitle {
       padding:8px 8px 8px 15px;
       margin:0px 0px 5px 0px;
       background-color:#<?php echo $flex_post_titlebg; ?>;
       font: <?php echo $flex_post_weight; ?> <?php echo $flex_post_size; ?>px/<?php echo $lineheight; ?>px <?php echo $flex_post_font; ?>;
       color: #<?php echo $flex_post_color; ?>;
       border: solid 1px #<?php echo $flex_post_brdr; ?>;
    }

    img {
       border:none;
       margin:0;
       padding:0;
    }

    .alignleft {
       margin-right:10px;
       margin-bottom:10px;
        float: left;
    }

    .alignright {
       margin-bottom:10px;
       margin-left:10px;
        float: right;
    }

    .aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
        margin-bottom:10px;
    }

    hr {
       height: 1px;
       border:0;
       width: 95%;
       color: #E6E6E6;
       background-color: #E6E6E6;
    }

    .postwrap blockquote {
       margin:0 15px 10px 15px;
       padding:10px 15px;
       border: 1px solid #<?php echo $flex_bquote_border; ?>;
       background: #<?php echo $flex_bquote_color; ?>;
    }

    .postwrap blockquote blockquote {
       margin-right:5px;
       margin-left:0;
       background: #<?php echo $flex_bquote_color; ?>;
    }

    .postwrap blockquote p {
       margin:0;
       padding:0 0 5px;
    }

    #bgwrapper {  /*--- This id selector controls the blog background layer ---*/
       width: 100%;
       margin: 0px;
       padding-top:<?php echo $flex_blog_margin; ?>px;
        background: url(images/bg-fade.png) repeat-x top left;
       min-height: 100%;
    }

    #wrap {
       width:<?php echo $flex_blog_width ?>px;
       margin:0px auto 0px;
       padding:0;
       border: solid <?php echo $flex_blog_borderwidth; ?>px #<?php echo $flex_blog_bordercolor; ?>;
        font:<?php echo $flex_blog_size; ?>px <?php echo $flex_blog_font; ?>, Arial, sans-serif;
    }


    #header {
    <?php if ($flex_head_image == "") { ?>
    background: url(images/headers/header-<?php echo $flex_header_bg; ?>) no-repeat center top;
    <?php } else { ?>
    background: url(images/<?php echo $flex_head_image; ?>) no-repeat center top;
    <?php } ?>
    background-color: #<?php echo $flex_header_backgroundcolor; ?>;
       height:<?php echo $flex_head_height; ?>px;
       width:<?php echo $flex_blog_width; ?>px;
        border-bottom: solid <?php echo $flex_blog_borderwidth; ?>px #<?php echo $flex_blog_bordercolor; ?>;
        position:relative;
    }

    #header a {
       color:#<?php echo $flex_title_clr; ?>;
       text-decoration: none;
    }

    #header h3 {
       font-size:<?php echo $flex_title_size; ?>px;
       width:<?php echo $flex_content_width; ?>px;
       left:20px;
       font-weight:400;
       line-height:<?php echo $titlelineheight; ?>px;
       font-family: <?php echo $flex_title_font; ?>;
       margin:0px;
       padding: <?php echo $titletoppadding; ?>px 0 10px 20px;
    }

    #logo {
       position: relative;
       top:10px;
       left:20px;
       height: 110px;
       width: 500px;
    }


    #logo a {
       display: block;
       height: 100%;
       width: 100%;
    }
       
    #header  h3  a {
       color: #<?php echo $flex_title_clr; ?>;
    }

    #header  h3  a:hover {
       color: #<?php echo $flex_title_hvr; ?>;
       text-decoration: none;
    }

    p.tagline {
       font-size:14px;
       font-weight:700;
       width:<?php echo $flex_content_width; ?>px;
       left:20px;
       color: #<?php echo $flex_tagline_color; ?>;
       margin:0;
        float:left;
       padding: 0 0 0 20px;
    }

    /*--- Navigation Menu Settings ---*/

    #nav {
    <?php if ($flex_nav_style == "simple") { ?>
    background: url(images/navfhleft.png) left top repeat-x;
       background-color: #<?php echo $flex_nav_barback; ?>;
        padding-left:0px;
    <?php } elseif ($flex_nav_style == "indent") { ?>
    background: url(images/navrdleft.png) left top repeat-x;
        background-color: #<?php echo $flex_nav_barback; ?>;
        padding-left:4px;
    <?php } elseif ($flex_nav_style == "aqua") { ?>
    background-image:none;
        background-color:#000;
        padding-left:10px;
    <?php } elseif ($flex_nav_style == "tabs") { ?>
    background: url(images/navssbg.png) left top repeat-x;
        background-color: #<?php echo $flex_nav_barback; ?>;
        padding-left:10px;
    <?php } elseif ($flex_nav_style == "cnn") { ?>
    background-color: #FFF;
        padding-left:0px;
        text-transform: uppercase;
        font-size:11px;
    <?php  } ?>
    border-bottom: solid <?php echo $flex_blog_borderwidth; ?>px #<?php echo $flex_blog_bordercolor; ?>;
        width:<?php echo $navwidth; ?>px; 
       margin: 0px;
        padding-left: 8px;
        height:33px;
    }

    #nav ul {
       margin: 0;
       padding: 0;
       list-style: none;
    }

    #nav li {
       float: left;
        margin-right: 8px;
    <?php if ($flex_nav_style == "simple") { ?>
    margin-right: 0px;
    <?php } elseif ($flex_nav_style == "tabs"){ ?>
    margin-right: 1px;
    <?php } elseif ($flex_nav_style == "indent"){ ?>
    margin-right: 1px;
    <?php } elseif ($flex_nav_style == "cnn"){ ?>
    margin-right: 0px;
    <?php } ?>
    }

    * html #nav li a { /* Filter for IE6 to prevent li stacking */
       float: left;
       text-decoration: none;
    }

    * html #nav li a span { /* Filter for IE6 to prevent li stacking */
       float: left;
       margin-left: 4px;
       text-decoration: none;
    }

    #nav li a {
       display: block;
       height: 33px;
    <?php if ($flex_nav_style == "indent") { ?>
    background: url(images/navrdleft.png) left top no-repeat;
    <?php } elseif ($flex_nav_style == "tabs") { ?>
    background: url(images/navssleft.png) left top no-repeat;
        padding-top:0px;
    <?php } elseif ($flex_nav_style == "simple") { ?>
    background: url(images/navfhleft.png) left top repeat-x;
    <?php } elseif ($flex_nav_style == "aqua") { ?>
    background: url(images/navsfleft.png) left top no-repeat;
    <?php } elseif ($flex_nav_style == "cnn") { ?>
    background: url(images/navcnnleft.png) left top no-repeat;
    <?php  } ?>
    background-color: #<?php echo $flex_nav_color; ?>;
       font-family: Arial, Helvetica;
       text-decoration: none;

     
    #nav li a span {
       display: block;
       margin-left: 10px;
       padding-left: 4px;
       padding-right: 13px;
       line-height: 32px;
        padding-bottom:1px;
       font-weight: normal;
       color: #<?php echo $flex_nav_txtclr; ?>;
    <?php if ($flex_nav_style == "indent") { ?>
    background: url(images/navrdright.png) right top no-repeat;
    <?php } elseif ($flex_nav_style == "tabs") { ?>
    background: url(images/navssright.png) right top no-repeat;
      line-height: 26px;
      padding-top:6px;
    <?php } elseif ($flex_nav_style == "simple") { ?>
    background: url(images/navfhright.png) right top repeat-x;
    <?php } elseif ($flex_nav_style == "aqua") { ?>
    background: url(images/navsfright.png) right top no-repeat;
    <?php } elseif ($flex_nav_style == "cnn") { ?>
    background: url(images/navcnnright.png) right top no-repeat;
        margin-left: 0px;
        padding-left: 8px;
    <?php  } ?>
    background-color: #<?php echo $flex_nav_color; ?>;
       text-decoration: none;
    }

    #nav li a:hover {
       background-position: left -33px;
       text-decoration: none;
       background-color: #<?php echo $flex_nav_tabhvr; ?>;
       cursor: pointer; /* For IE6 */
    }

    #nav li a:hover span {
       background-position: right -33px;
       color: #<?php echo $flex_nav_hvrcolor; ?>;
       background-color: #<?php echo $flex_nav_tabhvr; ?>;
    <?php if ($flex_nav_style == "tabs") { ?>
    line-height: 32px;
       padding-top:0px;
    <?php  } ?>
    }

    #nav li.current_page_item a, #nav li.current_page a {
       background-position: left -33px;
       background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }

    #nav li.current_page_item a span, #nav li.current_page a span {
       background-position: right -33px;
       color: #<?php echo $flex_nav_hvrcolor; ?>;
       background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }

    #nav {display:none;}

    /*-- Header search box styles --*/

    #header #searchform {
       width: 242px;
       height: 31px;
       background: url(images/searchboxes/<?php echo $flex_search_img; ?>) left 0px no-repeat;
       position: absolute;
       top: <?php echo $searchbox; ?>px;
       right: 15px;
    }

    *:first-child+html #header #searchform { /* Filter for IE7 */
         padding: 0px 0;
    }

    * html #header #searchform { /* Filter for IE6 */
         padding: 5px 0;
    }

    * html #header #searchbox { /* Filter for IE6 */
         margin-top: 0px;
    }

    #header #searchbox {
       margin-left: 28px;
       margin-top:6px;
       margin-bottom: 3px;
       width: 140px;
       background: none;
       border: none;
       color: #FFFFFF;
       font-size: 11px;
    }

    #header #searchbutton {
         width: 50px;
         background: none;
         border: none;
         margin-left:10px;
    }

    #header #searchbutton:hover {
       cursor: pointer;
    }

    /*-- Sidebar search box styles --*/

    #sidebar-top #searchform {
       width: <?php echo $sidebar; ?>px;
    }

    #sidebar-top #s {
       margin: 20px 0 5px 0;
       width: <?php echo $sidebar; ?>px;
    }
     
    #sidebar-left #searchform {
       width: <?php echo $flex_lsidebar_width; ?>px;
    }

    #sidebar-left #s {
       margin: 20px 0 5px 0;
       width: <?php echo $flex_lsidebar_width; ?>px;
    }
     
    #sidebar-right #searchform {
       width: <?php echo $flex_rsidebar_width; ?>px;
    }

    #sidebar-right #s {
       margin: 20px 0 5px 0;
       width: <?php echo $flex_rsidebar_width; ?>px;
    }

    /*-- Header RSS settings --*/

    #rssfeeds {
       width:300px;
       height: 70px;
       position: absolute;
       padding-top: 0px;
       bottom:0px;
       right:22px;
       color: #<?php echo $flex_rss_color; ?>;
    }

    #rssicon {
       float:right;
        margin-left:5px;
    }

    #rssfeeds a {
       color: #<?php echo $flex_rss_color; ?>;
        text-decoration:underline;
    }

    #rssfeeds a:hover {
       color: #<?php echo $flex_rss_hover; ?>;
    }

    #rssfeeds  p {
       line-height:16px;
       margin:0;
       padding:27px 0px 0 0;
       text-align: right;
    }

    /*-- Begin feature section styles --*/

    #feature {
       background: url(images/feature-bg.png) no-repeat bottom left;
        background-color: #<?php echo $flex_feat_bgcolor; ?>;
        width: <?php echo $flex_blog_width; ?>px;
        clear:both;
        color: #<?php echo $flex_feat_txtcolor; ?>;
        padding-bottom:10px;
       margin:0px;
    }

    #feature .topshadow {
       background: url(images/feature-shadow.png) no-repeat top left;
        width: <?php echo $flex_blog_width; ?>px;
    }
    #feature h2 {
        padding:0px;
            margin:0px 0px 10px 0px;
       color: #<?php echo $flex_feat_titlecolor; ?>;
       font-family: <?php echo $flex_sidebar_topfont; ?>, Arial, Helvetica;
       font-size: <?php echo $flex_feat_fontsize; ?>px;
    }   
    #feature a, #feature a:visited, #feature a:active {
       color: #<?php echo $flex_feat_linkcolor; ?>;
    }

    #feature a:hover {
       color: #<?php echo $flex_feat_hovercolor; ?>;
    }
    #feature .textwidget {
       padding:0px;
       color: #<?php echo $flex_feat_txtcolor; ?>;
    }

    #feature ul {
       list-style-type:none;
        padding:0px; 
    }
    #feature ul.children {
       margin:3px 0 0px 0;
       padding: 0px 0px 3px 0px;
       border:none;
    }

    #feature ul.children li{
        padding-bottom: 0px;
    }

    #feature ul li{
       list-style-type:none;
    <?php if ($flex_sidebar_list == "arrow") { ?>
    background:url(images/liarrow.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "square dot") { ?>
    background:url(images/lidot.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "none") { ?>
    background: none; padding-left:0px;
    <?php  } ?>
    padding-bottom:3px;
    }

    #feature ul li a {
       text-decoration:none;
    }

    .feat_box {
       padding:15px 15px 15px 15px;
        margin:0px;
       width: <?php echo $featwidgets; ?>px;
        float: left;
    }

    /*-- Begin page content CSS --*/

    #content {
       width:<?php echo $pagewidth ?>px;
       position:relative;
       float:left;
       color: #<?php echo $flex_blog_tc ?>;
        background-color: #<?php echo $flex_content_color; ?>;
       padding:5px 0px 0px 5px;
    }

    .postwrap a:link, .postwrap a:visited, .postwrap a:active {
       text-decoration:none;
       color: #<?php echo $flex_link_color; ?>;
       border:0;
       -moz-outline-style:none;
    }

    .postwrap a:hover {
       text-decoration:underline;
       color: #<?php echo $flex_link_hover; ?>;
       border:0;
       -moz-outline-style:none;
    }

    .posthead h1 {
       margin:0px;
       padding:8px 8px 8px 15px;
       background-color: #<?php echo $flex_post_titlebg; ?>;
       font: <?php echo $flex_post_weight; ?> <?php echo $flex_post_size; ?>px/<?php echo $lineheight; ?>px <?php echo $flex_post_font; ?>;
       border-bottom: <?php echo $flex_ptitle_uline; ?> <?php echo $flex_ptitle_ulines; ?>px #<?php echo $flex_ptitle_ulinec; ?>;
     
    }

    .postwrap {
       float:left;
       width:<?php echo $flex_content_width; ?>px;
       padding:0px 0px 0px 0px;
        margin-bottom:5px;
    }

    .post {
       background-color: #<?php echo $flex_post_clr; ?>;
       margin-bottom:5px;
       padding:0px;
       border: solid 1px #<?php echo $flex_post_brdr; ?>;
    }

    .postwrap p {
       line-height: 18px;
    }

    .posthead {
       padding-bottom:0px;
       position:relative;
       clear:left;
       margin-bottom: 0px;
    }

    #content .posthead h1, #content .posthead h1 a {
       color: #<?php echo $flex_post_color; ?>;
    }

    #content .posthead h1 a:hover, #content .postMeta a:hover {
       text-decoration: none;
       color: #<?php echo $flex_post_hover; ?>;
    }

    .postMeta {
    <?php if ($flex_metadata_bg == "yes") { ?>
    background: url(images/meta-bg.png) no-repeat left top;
    <?php  } ?>
    background-color: #<?php echo $flex_metadata_color; ?>;
       color: #<?php echo $flex_metadata_link; ?>;
       margin:0px;
       padding:5px 15px 5px 15px;
       font-size: 11px;
        height:20px;
    }

    .postMeta a, .postMeta a:link, .postMeta a:visited, .postMeta a:active {
       text-decoration: none;
        color: #<?php echo $flex_metadata_link; ?>;
    }

    #content .postMeta a:hover {
       text-decoration: underline;
        color: #<?php echo $flex_metadata_link; ?>;
    }

    div.commentcount {
       padding-left: 24px;
       background: url(images/comment.png) left top no-repeat;
       text-decoration: none;
       padding-top: 3px;
       padding-bottom: 3px;
        float:right;
    }

    div.postdate {
       padding-left: 24px;
       background: url(images/date.png) left top no-repeat;
       text-decoration: none;
       padding-top: 3px;
       padding-bottom: 3px;
        float:left;
    }

    #content .postcontent {
       padding:15px 15px 0px 15px;
       line-height:18px;
       color: #<?php echo $flex_posttext_color; ?>;
    }

    .postcontent a {
       text-decoration: underline;
    }

    pre {
       background-color: #F9F8E3;
        border: 1px dotted #999;
        padding: 0px 8px 15px 8px;
        margin:0 15px 10px 15px;
    }   

    .more-link {
       font-weight:700;
       margin-top:15px;
       height: 16px;
       width: 300px;
       display: block;
    }

    .Note {
       margin:0px;
        padding:0px;
        font-size:11px;
    }

    #content ul.Note li a, #content ul.Note li a:link, #content ul.Note li a:visited {
       color: #<?php echo $flex_blog_tc; ?>;
    }

    ul.Note {
       background-color: #<?php echo $flex_content_color; ?>;
       margin-top:0px;
       padding:5px;

    }

    .Note li {
       list-style-type:none;
       padding:2px 0 2px 15px;
    }

    .NoteRss {
       background:url(images/NoteRss.png) no-repeat left 2px;
        display:inline;
        margin-left:5px;
    }

    .NoteTrackBack {
       background:url(images/NoteTrackBack.gif) no-repeat left 2px;
        display:inline;
        margin-left:10px;
    }

    /*-- Comment Settings --*/

    #commentblock {
       width: <?php echo $commentswidth; ?>px;
       float:left;
       margin-top:10px;
       padding:0;
       border: none;
    }

    #commentblock a, #commentblock a:link, #commentblock a:visited {
       color: #<?php echo $flex_comments_link; ?>;
    }

    .comment-wrap {
       padding-left:10px;
        padding-right:10px;
       padding-top: 10px;
       padding-bottom: 10px;
       display: block;
     
    }

    #commentblock ol {
       padding: 0px;
       list-style: none;
    }

    #commentblock  ol li {
       margin-bottom: 10px;
       padding: 10px;
        background-color: #FFF;
        border: solid 1px #<?php echo $flex_comments_border; ?>;
        background-color: #<?php echo $flex_comments_background; ?>;
    }

    .commentdate {
       padding-left:0;
    }

    #commentlist li p {
       margin-bottom:8px;
       line-height:20px;
       padding:0;
    }

    .commentlist li.alt .commenttext {
       clear: both;
    }

    .commentname {
       margin:0;
       padding:5px 5px 5px 0;
    }

    .commentinfo {
       clear:both;
    }

    .commenttext {
       clear:both;
       padding-top: 10px;
        display:block;
       margin-bottom: 0px;
    }

    .comment-wrap blockquote, .comment-wrap blockquote blockquote {
       margin-bottom:10px;
       margin-top: 8px;
        background: url(images/comments-lighter.png) no-repeat top left;
        border: 1px solid #000;
    }

    .commenttext p {
       margin:0;
       padding:0 0 10px 0;
    }

    #commentform #submit {
       color: #<?php echo $flex_comments_buttext; ?>;
       font-family:Arial, Helvetica;
       font-size:14px;
       font-weight:700;
       border:1px solid #000;
       display:block;
       margin:0;
       padding:4px;
       background-color: #<?php echo $flex_comments_button; ?>;
    }

    #commentform input, #commentform textarea {
       padding:5px;
       background-color: #<?php echo $flex_comments_background; ?>;
        border: solid 1px #<?php echo $flex_comments_border; ?>;
        color: #<?php echo $flex_blog_tc ?>;
    }

    #commentform textarea {
       width: 98%;
    }

    p.meta {
       margin: 0 0 5px 0;
       padding: 0px;
       float: left;
    }

    p.meta a {
       text-decoration: none;
    }

    p.approval {
       font-style: italic;
       clear: left;
    }

    p.commenttitle {
       font: 18px Georgia, "Times New Roman", Times, serif;
       margin-top: 0px;
       padding-top: 0px;
    }

    /*-- Sidebar settings --*/

    #sidebar {
       float:right;
       width:<?php echo $sidebar; ?>px;
       margin-top:0px;
       position:relative;
       padding-right: 0px;
       margin-bottom: 15px;
        margin-left:5px;
        margin-right:5px;
    }

    #sidebar ul, #feature ul{
       margin: 0px;
        padding: 0 0 0 8px;
    }

    #sidebar-top {
       width: <?php echo $sidebar; ?>px;
       padding:0px;
        color: #<?php echo $flex_sidebar_textcolor; ?>;
    }

    #sidebar-top h2 {
        margin:0px;
       padding: 8px 8px 8px 23px;
       color: #<?php echo $flex_sidebar_title; ?>;
       font-family: <?php echo $flex_sidebar_topfont; ?>, Arial, Helvetica;
       font-size: <?php echo $flex_sidebar_tfontsize; ?>px;
       background: url(images/sidebar-h2-bg.png) no-repeat top left;
       background-color: #<?php echo $flex_sidebar_titlebackground; ?>;
        border-bottom: solid 1px #<?php echo $flex_sidebar_boxborder; ?>;
       text-transform: <?php echo $flex_sidebar_case; ?>;
       letter-spacing: <?php echo $flex_sidebar_tfontspace; ?>px;
    }

    #sidebar-top a, #sidebar-top a:visited, #sidebar-top a:active {
       color: #<?php echo $flex_sidebar_textlink; ?>;
    }

    #sidebar-top a:hover {
       color: #<?php echo $flex_sidebar_hovercolor; ?>;
    }

    .sidebar-top-box {
       margin-bottom:4px;
       padding:8px;
       background-color: #<?php echo $flex_sidebar_boxcolor; ?>;
       color: #<?php echo $flex_sidebar_textcolor; ?>;
       border: 1px solid #<?php echo $flex_sidebar_boxborder; ?>;
    }

    .box-padding {
       padding:7px;
    }

    .sidebar-top-box p {
       margin-top:3px;
       margin-bottom:3px;
    }

    #sidebar-top .textwidget {
       padding:10px 10px 10px 10px;
       color: #<?php echo $flex_sidebar_textcolor; ?>;
    }

    #sidebar-top ul {
       list-style-type:none;
        padding:10px; 
    }

    #sidebar-top .widget {
        margin:0px 0px 5px 0px;
       background-color: #<?php echo $flex_sidebar_boxcolor; ?>;
       border: solid 1px #<?php echo $flex_sidebar_boxborder; ?>;   
    }

    #sidebar-top ul.children {
       margin:3px 0 0px 0;
       padding: 0px 0px 3px 0px;
       border:none;
    }

    #sidebar-top ul.children li {
        padding-bottom: 0px;
    }

    #sidebar-top ul li {
       list-style-type:none;
    <?php if ($flex_sidebar_list == "arrow") { ?>
    background:url(images/liarrow.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "square dot") { ?>
    background:url(images/lidot.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "none") { ?>
    background: none; padding-left:0px;
    <?php  } ?>
    padding-bottom:3px;
    }

    #sidebar-top ul li a {
       text-decoration:none;
    }

    #sidebar-left a, #sidebar-left a:visited, #sidebar-left a:active, #sidebar-right a, #sidebar-right a:visited, #sidebar-right a:active {
       color: #<?php echo $flex_lsidebar_linkcolor; ?>;
       text-decoration: none;
    }


    #sidebar #sidebar-left, #sidebar #sidebar-right {
       color: #<?php echo $flex_lsidebar_txtcolor; ?>;
    }

    #sidebar-left a:hover, #sidebar-right a:hover {
       color: #<?php echo $flex_lsidebar_hovercolor; ?>;
    }

    #sidebar-left {
       float:left;
       width: <?php echo $flex_lsidebar_width; ?>px;
       padding:0 4px 0 4px;
    }

    #sidebar #sidebar-left h2, #sidebar #sidebar-right h2 {
       margin:15px 0 10px;
       padding-left: 5px;
       color: #<?php echo $flex_lsidebar_titlecolor; ?>;
       border-bottom: <?php echo $flex_sidebar_uline; ?> <?php echo $flex_sidebar_ulines; ?>px #<?php echo $flex_sidebar_ulinec; ?>;
       font-family: <?php echo $flex_sidebar_ssfont; ?>, Arial, Helvetica;
       font-size: <?php echo $flex_sidebar_ssfontsize; ?>px;
       text-transform: <?php echo $flex_sidebar_scase; ?>;
       letter-spacing: <?php echo $flex_sidebar_sfontspace; ?>px;
    }

    #sidebar-right {
       float:right;
       width: <?php echo $flex_rsidebar_width; ?>px;
       padding:0 4px 0 4px;
    }

    #sidebar-left ul , #sidebar-right ul {
       padding-left:5px;
    }

    #sidebar-right ul li, #sidebar-left ul li {
    <?php if ($flex_lsidebar_list == "arrow") { ?>
    background:url(images/liarrow.png) no-repeat left top; padding:0 0 5px 8px;
    <?php } elseif ($flex_lsidebar_list == "square dot") { ?>
    background:url(images/lidot.png) no-repeat left top; padding:0 0 5px 8px;
    <?php } elseif ($flex_lsidebar_list == "none") { ?>
    background: none; padding:0 0 5px 0px;
    <?php  } ?>
    list-style:none;
       margin:0;
    }
       
    #sidebar-left  .children, #sidebar-right  .children {
       padding-top: 5px;
    }

    #sidebar-left  ul.children  li, #sidebar-right  ul.children  li {
       padding-bottom: 3px;
       padding-top: 0px;
    }

    #sidebar-top h2 a.rsswidget {
       color: #<?php echo $flex_sidebar_title; ?>;
       text-decoration: none;
    }

    #sidebar #sidebar-left h2 a.rsswidget, #sidebar #sidebar-right h2 a.rsswidget {
       color: #<?php echo $flex_lsidebar_titlecolor; ?>;
       text-decoration: none;
    }

    #sidebar .rsswidget img {
       float: left;
       margin-top: 2px;
       margin-right: 7px;
    }

    /*-- Footer settings --*/

    #footer {
       float:left;
       width: <?php echo $footerwidth; ?>px;
        background: url(http://www.flexibilitytheme.com/images/link.gif) no-repeat top left;
        background-color: #<?php echo $flex_footer_color; ?>;
       color: #<?php echo $flex_footer_text; ?>;
       font:<?php echo $flex_blog_size; ?>px <?php echo $flex_blog_font; ?>, Arial, sans-serif;
       padding:0px;
       margin: 0px;
       
    }

    #footer a:link, #footer a:visited, #footer a:hover, #footer a:active, #footer a:focus {
       color: #<?php echo $flex_footer_link; ?>;
       text-decoration:underline;
    }

    #footerdark {
       background: url(images/footerdark.png) no-repeat top left;
        padding:7px 0 25px 0;
        width: <?php echo $footerwidth; ?>px;
    }


    #footer .topshadow {
       background: url(images/feature-shadow.png) no-repeat top left;
        padding-bottom:20px;
    }

    #footer p {
       padding:10px 0 0 15px;
        margin:0px;
    }
    #footer h2 {
        padding:0px;
            margin:0px 0px 10px 0px;
       color: #<?php echo $flex_footer_link; ?>;
       font-family: <?php echo $flex_sidebar_topfont; ?>, Arial, Helvetica;
       font-size: <?php echo $flex_feat_fontsize; ?>px;
    }   

    #footer .textwidget {
       padding:0px;
       color: #<?php echo $flex_feat_txtcolor; ?>;
    }

    #footer ul {
       list-style-type:none;
        padding:0px; 
    }
    #footer ul.children {
       margin:3px 0 0px 0;
       padding: 0px 0px 3px 0px;
       border:none;
    }

    #footer ul.children li{
        padding-bottom: 0px;
    }

    #footer ul li{
       list-style-type:none;
    <?php if ($flex_sidebar_list == "arrow") { ?>
    background:url(images/liarrow.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "square dot") { ?>
    background:url(images/lidot.png) no-repeat left top; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "none") { ?>
    background: none; padding-left:0px;
    <?php  } ?>
    padding-bottom:3px;
    }

    #footer ul li a {
       text-decoration:none;
    }

    .foot_box {
       padding:15px 15px 15px 15px;
        margin:0px;
       width: <?php echo $footwidgets; ?>px;
        float: left;
    }

    /*-- Related Posts plugin settings --*/

    .rel-posts {
       margin:0 0 10px;
       padding:0 0 10px;
    }

    .rel-posts ul {
       margin:0;
       padding:0;
    }

    .rel-posts li {
       list-style-type:none;
    <?php if ($flex_sidebar_list == "arrow") { ?>
    background:url(images/liarrow-dark.png) no-repeat left 2px; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "square dot") { ?>
    background:url(images/lidot-dark.png) no-repeat left 2px; padding-left:10px;
    <?php } elseif ($flex_sidebar_list == "none") { ?>
    background: none; padding-left:0px;
    <?php  } ?>
    margin:2px 0 0 0;
       padding:0px 0 0px 11px;
    }

    .rel-posts li a {
       text-decoration: none;
    }

    /*-- Wordpress calendar settings --*/

    #wp-calendar {
       width:100%;
       border-collapse:collapse;
       margin:0;
       padding:0;
       background: #FFFFFF;
    }

    #wp-calendar caption {
       padding-top:3px;
       padding-bottom:6px;
       text-align:left;
       font-family: <?php echo $flex_sidebar_ssfont; ?>, Arial, Helvetica;
       font-size: <?php echo $flex_sidebar_ssfontsize; ?>px;
       font-weight: bold;
       color: #<?php echo $flex_lsidebar_titlecolor; ?>;
       text-transform: <?php echo $flex_sidebar_scase; ?>;
       letter-spacing: <?php echo $flex_sidebar_sfontspace; ?>px;
    }

    #wp-calendar td {
       text-align:center;
       padding-top:2px;
       padding-bottom:2px;
       line-height:15px;
    }

    #wp-calendar th {
       background-color: #<?php echo $flex_header_backgroundcolor; ?>;
       color: #FFFFFF;
    }

    #wp-calendar tbody {
       border-right: 1px solid #D8D8D8;
       border-left: 1px solid #D8D8D8;


    }

    #content #sidebar #wp-calendar a {
       font-weight:700;
       color: #<?php echo $flex_rss_color; ?>;
       text-decoration:none;
       display:block;
       border-style:none;
       margin:0;
       padding:0;
       background-color: #<?php echo $flex_header_backgroundcolor; ?>;
    }

    #content #sidebar #wp-calendar a:hover {
       font-weight:700;
       color: #<?php echo $flex_rss_hover; ?>;
       text-decoration:none;
       border-style:none;
       margin:0;
       padding:0;
    }

    #wp-calendar tfoot, #wp-calendar tfoot .pad {
       background-color: #<?php echo $flex_header_backgroundcolor; ?>;
    }

    #wp-calendar tfoot a:hover {
       text-decoration:underline;
    }

    #wp-calendar tfoot a {
       display:block;
       padding:2px 0;
       color: #FFFFFF;
       text-decoration: none;
    }

    #wp-calendar tfoot td {
       padding:4px 0;
    }

    #wp-calendar thead {
       border-right: 1px solid #<?php echo $flex_header_backgroundcolor; ?>;
       border-left: 1px solid #<?php echo $flex_header_backgroundcolor; ?>;
    }

    #wp-calendar tfoot {
       border-right: 1px solid #<?php echo $flex_header_backgroundcolor; ?>;
       border-left: 1px solid #<?php echo $flex_header_backgroundcolor; ?>;
    }

    #credit {
       font: 11px Arial, Helvetica;
       padding: 8px;
        width:<?php echo $flex_blog_width; ?>px;
        margin: 0 auto;
        text-align:center;
    }


    form {
       margin:0;
       padding:0;
    }

    /* Styling for RSS feed widget */

    #rss a {
       color: #<?php echo $flex_sidebar_title; ?>;
       line-height: 20px;
    }

    #rss a:hover {
       color: #<?php echo $flex_sidebar_title; ?>;
       text-decoration: none;
    }

    .clearer {
       clear: both;
       float: none;
    }

    #nextprevious {
       padding:15px;
        float:left;
        width: 95%;
    }
    #nextprevious a, #nextprevious a:link, #nextprevious a:visited, #nextprevious a:active {
       color: #<?php echo $flex_blog_tc ?>;
    }

    #nextprevious div.left {
       float:left;
    }

    #nextprevious div.right {
       float:right;
    }

    /* Legacy comments styling */

    img.avatar {
       float:right;
        border:solid 2px #000;
    }
    div.vcard a {
       font-weight:bold;

    }
    ol li div.comment-meta { font-size:9px; margin:5px 0 10px 0; }

    /* End Legacy comments styling */

    /* Styling for WP 2.7 nested comments. Thanks to Chris Harrison at http://cdharrison.com for breaking these down. I changed what I needed and left the rest for future styling.  */

    #content ol.commentlist a, #content ol.commentlist a:link, #content ol.commentlist a:visited {color: #<?php echo $flex_comments_link; ?>; }
    ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
    ol.commentlist li {margin-bottom: 10px; }
    ol.commentlist li.alt { }
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    ol.commentlist li.comment-author-admin {background-color: #<?php echo $flex_admin_comments; ?>;}
    ol.commentlist li.comment { padding:1em; }
    ol.commentlist li div.comment-author {}
    div.vcard { font:normal 16px georgia,times,serif; }
    ol.commentlist li div.vcard cite.fn { font-style:normal;font-weight:bold; }
    ol.commentlist li div.vcard cite.fn a.url {}
    ol.commentlist li div.vcard img.avatar { border:2px solid #000; float:right; margin:0 0 1em 1em; }
    ol.commentlist li div.vcard img.avatar-32 {}
    ol.commentlist li div.vcard img.photo {}
    ol.commentlist li div.vcard span.says {}
    ol.commentlist li div.commentmetadata {}
    ol.commentlist li div.comment-meta { font-size:9px; margin:5px 0 10px 0; }
    ol.commentlist li div.comment-meta a { }
    ol.commentlist li p { margin:0 0 1em; }
    ol.commentlist li ul { list-style:square; margin:0 0 1em 2em; }
    ol.commentlist li div.reply { font-size:11px; }
    #content ol.commentlist li div.reply a { color:#FFF; font-weight:bold; padding:3px 6px; background-color: #<?php echo $flex_header_backgroundcolor; ?>;  border:1px solid #000;}
    #content ol.commentlist li div.reply a:hover { background-color:#555; text-decoration:none;}
    ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
    ol.commentlist li ul.children li {}
    ol.commentlist li ul.children li.alt {}
    ol.commentlist li ul.children li.bypostauthor {}
    ol.commentlist li ul.children li.byuser {}
    ol.commentlist li ul.children li.comment {}
    ol.commentlist li ul.children li.comment-author-admin {background-color: #<?php echo $flex_admin_comments; ?>;}
    ol.commentlist li.depth-1, ol.commentlist li.depth-1.parent {border: solid 1px #<?php echo $flex_comments_border; ?>;}
    ol.commentlist li ul.children li.depth-2 { border:1px solid #<?php echo $flex_comments_border; ?>; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-3 { border:1px solid #<?php echo $flex_comments_border; ?>; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-4 { border:1px solid #<?php echo $flex_comments_border; ?>; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-5 { border:1px solid #<?php echo $flex_comments_border; ?>; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.odd {}
    ol.commentlist li.even { background-color: #<?php echo $flex_comments_background; ?>; background-image:none; }
    ol.commentlist li.comment-author-admin.even, ol.commentlist li.comment-author-admin.odd { background-color: #<?php echo $flex_admin_comments; ?>; background-image:none;}
    ol.commentlist li.odd { background: url(images/comments-lighter.png) no-repeat top left; background-color: #<?php echo $flex_comments_background; ?>;  }
    ol.commentlist li.parent { border:none; }
    ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
    ol.commentlist li.thread-alt { }
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    ol.pinglist li a, ol.pinglist li a:link, ol.pinglist li a:visited ol.pinglist li {color: #<?php echo $flex_comments_link; ?>; }

    <---------------------------------------------------------------------------->
    <---------------AKU MASUKKAN KAT SINI...GARIS NIH X WUJUD-------------------->
    <---------------------------------------------------------------------------->

    ul#topnav {
       margin: 0; padding: 0;
       float:left;
       width: 100%;
       list-style: none;
       font-size: 1.1em;
            background:url(images/nav/bg_nav.png);
    }
    ul#topnav li {
       float: left;
       margin: 0; padding: 0;
       position: relative; /*--Important--*/
    }
    ul#topnav li a {
       float: left;
       text-indent: -9999px; /*--Push text off of page--*/
       height: 43px;
    }
    ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/
    ul#topnav a.home {
       background: url(images/nav/home_nav.png) no-repeat;
       width: 75px;
    }
    ul#topnav a.category {
       background: url(images/nav/category_nav.png) no-repeat;
       width: 115px;
    }
    ul#topnav a.download {
       background: url(images/nav/download_nav.png) no-repeat;
       width: 122px;
    }
    ul#topnav a.about {
       background: url(images/nav/about_nav.png) no-repeat;
       width: 75px;
    }
    ul#topnav a.sitemap {
       background: url(images/nav/sitemap_nav.png) no-repeat;
       width: 95px;
    }

    ul#topnav a.products {
       background: url(images/nav/nav_products.png) no-repeat;
       width: 117px;
    }
    ul#topnav a.sale {
       background: url(images/nav/nav_sale.png) no-repeat;
       width: 124px;
    }
    ul#topnav a.community {
       background: url(images/nav/nav_community.png) no-repeat;
       width: 124px;
    }
    ul#topnav a.store {
       background: url(images/nav/nav_store.png) no-repeat;
       width: 143px;
    }

    ul#topnav li .sub {
       position: absolute; /*--Important--*/
       top: 44px; left: 0;
       background: #344c00 url(images/nav/sub_bg.png) repeat-x; /*--Background gradient--*/
       padding: 20px 20px 20px;
       float: left;
       /*--Bottom right rounded corner--*/
       -moz-border-radius-bottomright: 5px;
       -khtml-border-radius-bottomright: 5px;
       -webkit-border-bottom-right-radius: 5px;
       /*--Bottom left rounded corner--*/
       -moz-border-radius-bottomleft: 5px;
       -khtml-border-radius-bottomleft: 5px;
       -webkit-border-bottom-left-radius: 5px;
        display: none; /*--Hidden for those with js turned off--*/
    }
    ul#topnav li .row { /*--If needed to break out into rows--*/
       clear: both;
       float: left;
       width: 100%;
       margin-bottom: 10px;
    }
    ul#topnav li .sub ul{
       list-style: none;
       margin: 0; padding: 0;
       width: 150px;
       float: left;
    }
    ul#topnav .sub ul li {
       width: 100%; /*--Override parent list item--*/
       color: #fff;
    }
    ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/
       padding: 0;  margin: 0;
       font-size: 1.3em;
       font-weight: normal;
    }
    ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/
       padding: 5px 0;
       background-image: none;
       color: #e8e000;
    }
    ul#topnav .sub ul li a {
       float: none;
       text-indent: 0; /*--Override text-indent from parent list item--*/
       height: auto; /*--Override height from parent list item--*/
       background: url(images/navlist_arrow.png) no-repeat 5px 12px;
       padding: 7px 5px 7px 15px;
       display: block;
       text-decoration: none;
       color: #fff;
    }
    ul#topnav .sub ul li a:hover {
       color: #ddd;
       background-position: 5px 12px ;/*--Override background position--*/
    }

    <---------------------------------------------------------------------------->
    <---------------TAMAT TAMBAHAN...GARIS NIH X WUJUD--------------------------->
    <---------------------------------------------------------------------------->

    then nih plak aku aku punya header.php:

    UPDATE ON 16 DISEMBER (latest)

    Code:
    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="distribution" content="global" />
    <meta name="robots" content="follow, all" />
    <meta name="language" content="en, sv" />
    <?php
    global $options;
    foreach ($options as $value) {
            if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_option( $value['id'] ); } }
    ?>
    <title>
    <?php wp_title(''); ?>
    <?php if(wp_title('', false)) { echo ' :'; } ?>
    <?php bloginfo('name'); ?>
    </title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats please -->
    <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>
    <!--<style type="text/css" media="screen">
    @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style> -->
    <!--[if lte IE 6]>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/iepngfix_tilebg.js"></script>
     <![endif]-->


    <---------------------------------------------------------------------------->
    <---------------AKU MASUKKAN KAT SINI...GARIS NIH X WUJUD-------------------->
    <---------------------------------------------------------------------------->

    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
       

       function megaHoverOver(){
          $(this).find(".sub").stop().fadeTo('fast', 1).show();
             
          //Calculate width of all ul's
          (function($) {
             jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {               
                   rowWidth += $(this).width();
                });   
             };
          })(jQuery);
          
          if ( $(this).find(".row").length > 0 ) { //If row exists...
             var biggestRow = 0;   
             //Calculate each row
             $(this).find(".row").each(function() {                      
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                   biggestRow = rowWidth;
                }
             });
             //Set width
             $(this).find(".sub").css({'width' :biggestRow});
             $(this).find(".row:last").css({'margin':'0'});
             
          } else { //If row does not exist...
             
             $(this).calcSubWidth();
             //Set Width
             $(this).find(".sub").css({'width' : rowWidth});
             
          }
       }
       
       function megaHoverOut(){
         $(this).find(".sub").stop().fadeTo('fast', 0, function() {
            $(this).hide();
         });
       }


       var config = {   
           sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)   
           interval: 100, // number = milliseconds for onMouseOver polling interval   
           over: megaHoverOver, // function = onMouseOver callback (REQUIRED)   
           timeout: 500, // number = milliseconds delay before onMouseOut   
           out: megaHoverOut // function = onMouseOut callback (REQUIRED)   
       };

       $("ul#topnav li .sub").css({'opacity':'0'});
       $("ul#topnav li").hoverIntent(config);


    });

    </script>

    <---------------------------------------------------------------------------->
    <---------------TAMAT TAMBAHAN...GARIS NIH X WUJUD--------------------------->
    <---------------------------------------------------------------------------->

    </head>
    <body>
    <div id="bgwrapper">
    <div id="wrap">
    <?php if ($flex_nav_position == "above") { ?>
    <div id="nav" style="clear:both;">
      <ul>
        <?php if ($flex_nav_home == "no") { ?>
        <?php } else { ?>
        <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
        <?php } ?>
        <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
     
      </ul>
      <div class="clearer"></div>
    </div>
    <?php } else { ?>
    <?php } ?>
    <div id="header">
      <?php if ($flex_search_visibility == "yes") { ?>
      <?php include (TEMPLATEPATH . '/searchform.php'); ?>
      <?php } else { ?>
      <?php } ?>
      <?php if ($flex_blog_logo == "") { ?>
      <h3><a href="<?php echo get_option('home'); ?>/">
        <?php bloginfo('name'); ?>
        </a></h3>
      <p class="tagline">
        <?php bloginfo('description'); ?>
      </p>
      <?php } else { ?>
      <div id="logo" style="background: url(<?php bloginfo('template_url'); ?>/images/<?php echo $flex_blog_logo; ?>) no-repeat left top;" ><a href="<?php echo get_option('home'); ?>/"> </a> </div>
      <?php } ?>
      <?php if ($flex_subrss_visibility == "yes") { ?>
      <div id="rssfeeds"> <a href="<?php bloginfo_rss('rss2_url'); ?>"><img id="rssicon" src="<?php bloginfo('template_url'); ?>/images/rssicons/<?php echo $flex_rss_icon; ?>.png" alt="Subscribe to RSS" /></a>
        <p>Subscribe via
          <?php if ($flex_email_visibility == "yes") { ?>
          <a href="<?php echo $flex_email_address; ?>">Email</a> | <a href="<?php bloginfo_rss('rss2_url'); ?>">RSS</a></p>
        <?php } else { ?>
        <a href="<?php bloginfo_rss('rss2_url'); ?>">RSS</a>
        </p>
        <?php } ?>
      </div>
      <?php } else { ?>
      <?php } ?>
    </div>

    <---------------------------------------------------------------------------->
    <---------------AKU MASUKKAN KAT SINI...GARIS NIH X WUJUD-------------------->
    <---------------------------------------------------------------------------->

    <ul id="topnav">
        <li><a href="http://" class="home">Home</a></li>
        <li>
           <a class="category">Category</a>
            <div class="sub">
                <ul>
                    <li><h2><a href="#">Desktop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Laptop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
        <li><a class="download">Download</a></li>
        <li><a href="/about" class="about">About</a></li>
        <li><a href="/sitemap" class="sitemap">Sitemap</a></li>
    </ul>

    <---------------------------------------------------------------------------->
    <---------------TAMAT TAMBAHAN...GARIS NIH X WUJUD--------------------------->
    <---------------------------------------------------------------------------->

    <?php if ($flex_nav_position == "below") { ?>
    <div id="nav" style="clear:both;">
      <ul>
        <?php if ($flex_nav_home == "no") { ?>
        <?php } else { ?>
        <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
        <?php } ?>
        <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
      </ul>
      <div class="clearer"></div>
    </div>
    <?php } else { ?>
    <?php } ?>

    jquery.hoverIntent.minified.js plak aku insert dalam theme punya directory...
    url dia:

    http://xxx/wp-content/themes/flexibility2/jquery.hoverIntent.minified.js


    macam dah betul je aku ikut dia punya tuh...
    apsal still x jadi erk??
    thanks.


    Last edited by silentfox on Wed Feb 03, 2010 9:42 pm; edited 4 times in total (Reason for editing : Remove URL sebab masalah x selesai...)

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Wed Dec 09, 2009 11:55 am

    script jquery.hoverIntent.minified.js ko xlengkap. gnti ngan yg bwh ni, cuba tgk jd x.

    Code:

    /**
    * hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
    * <http://cherne.net/brian/resources/jquery.hoverIntent.html>
    *
    * @param  f  onMouseOver function || An object with configuration options
    * @param  g  onMouseOut function  || Nothing (use configuration options object)
    * @author    Brian Cherne <brian@cherne.net>
    */
    (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 09, 2009 8:42 pm

    a'a...
    x perasan la lak...thanks luangkan masa utk tgk...

    aku dah alter...
    tapi still x jadi...
    dia macam ada blank jer tempat dropdown tuh...
    mcm x appear lak...error kat mana ntah...

    lagi satu...
    cara aku masukkan code nih betul ker??

    Code:
    <ul id="topnav">
        <li><a href="#" class="home">Home</a></li>
        <li>
    bla...bla...bla...bla...
          |
          |
          |
          |
          V
        <li><a href="#" class="store">Store Locator</a></li>
    </ul>

    aku try wrap dgn masukkan <div> (code kat atas) </div> tapi stil x jadik gak...so aku buang balik <div> tuh...

    lagi satu yg dia bagi...

    Code:
    <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

    aku tukar dgn yg nih...

    Code:
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript">

    aku test2 dua2 tapi mcm sama jer...xde apa perubahan...

    buntu2... Sad

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Wed Dec 09, 2009 9:14 pm

    err aku tgk ko xtkar lg yg javascript tu. cube tkar dlu.
    nt aku cek blk cmne


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 09, 2009 9:30 pm

    owh...
    aku dah tukar balik ke yg dia bagi...

    kalau ko nak full access ke dashboard aku leh bagi...
    kalau ko ada masa la...

    aku ada tanya owner website tuh dia tp still belum reply...
    busy agaknya...

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Wed Dec 09, 2009 9:39 pm

    bleh je kl ko nk bg. pm aku


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 09, 2009 11:02 pm

    dah pm...
    trimasss...
    apa2 update kat sini k...

    aku pun try2 gak...

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Sun Dec 13, 2009 4:47 am

    wow...
    dah kuar...

    ko replace

    Code:
    <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

    dengan benda nih jer kan johnburn?

    Code:
    <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>

    yang lain mcm xde perubahan aku tgk...

    owh patut la x kuar...
    kena masukkan icon smua tuh dlm database...
    fix icon rupanya...
    x perasan...huhu!

    aku ingat dia punya color bleh tukar guna css...
    rupanya dia taruk fix icon...
    so ko dah masukkan dlm database aku...thanks for that...

    ada cara nak ubah fix icon tuh jadik warna biru ikut theme aku guna css?
    ke mmg kena color balik icon tuh?

    one more thing...
    apsal x kuar dia punya dropdown bila kita hover erk?
    ke dia terlindung kat belakang n x appear...

    apapun great job!
    bgga aku dgn org ganu!! Laughing

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Sun Dec 13, 2009 6:55 am

    die pkai sprite image untuk main menu tuh. aritu yg jd xkuar sbb ko ltak name image tu dlm css tp image tu xde pn kt server. satu lg path ke image tu pn xbtol gak aritu. kl ko nk bt kaler biru, ko kne ubah la image tu. kl xnk, ko kne tkar css tu bt die pkai kaler je ke.
    psal hover tu aku xabes test lg. yg peliknye k error console firefox xde error dh Razz
    mngkn aku ade terlpas pndang ape2. tgk la nt kl ade mase aku godek2 lg


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Sun Dec 13, 2009 10:53 am

    yg peliknye k error console firefox xde error dh

    erk? yg nih aku x faham...sebelum nih ada msalah erk ngn template aku? aku x reti la plak nak check2 nih... pale

    sebelum nih aku just dgr2 je pasal sprite image nih...td aku ada baca2 skit...so dah tau la skit...agaknya la...

    kalau pakai color jer sure x lawa sgt...
    so aku try buat button la...

    aku just nak buat 5 menu jer ikut perancangan...

    Home | Category | Download | About | Sitemap

    aku try pakai Blumentals Easy Button & Menu Maker Pro 1.5.0.7 tgk jadi ke x...

    kat laptop nih xde photoshop lak...
    fuhh...byk benda lagi rupanya aku nak kena blaja pasal website nih...
    ada masa usha drop down yg x kuar2 tuh erk...
    apapun thanks atas contribution ko... cheers

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Mon Dec 14, 2009 6:23 pm

    sehari suntuk aku masik masa nak siapkan menu button guna sprite image nih...
    benda baru utk aku...so mmg pening la skit nak buat...

    akhirnya settle jugak bab navigation menu button design tuh...mcm lawa la plak aku buat...edit guna paint jer... Laughing

    @johnburn

    semua image yg berkaitan dgn dropdown menu dlm server nih aku pindahkan ker images/nav directory...
    aku xnak serabut2 nanti...

    aku replace dgn yg aku design...tapi yg lama stil ada lagi...aku takut aku silap replace or error masa design...tapi aku rasa smuanya ok kut...

    skrg tinggal dropdown tuh jer yg x kuar2...
    huhu...
    kalau kuar yg tuh mmg settle la...
    bab design n color aku bley adjust sendirik...cuma main code2 nih aku x brapa mahir sgt...scratch huhu....ada masa tolong erk...

    lagi satu kalau ada apa2 yg ko ubah...mcm css error ker...apa2 je la...tolong inform aku erk...senang aku nak ubah utk site2 aku yg lain...okies...

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Mon Dec 14, 2009 6:43 pm

    wah menarik, sume button dh tukar kaler hehe Very Happy
    psal drop down tu aku x figure out lg. tgk la nt cmne.
    oo satu aku nk bgtau, kl yg ade javascript ni, kl ko pkai firefox, first skali ko tgk kt error console (Tools >> Error Console) tgk ade error x and try fix tu dlu
    satu lg ko bleh install addon firebug. mmg berguna untk time development nih.


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Tue Dec 15, 2009 4:20 am

    owh...pasal error console tuh aku baru tau...
    ada some errors td...n aku dah fix aku rasa...
    skrg mcm clean jer...aku rasa la...huhu

    firebug !!
    mantap la addon nih...
    mmg seswai utk development...
    bg beginner mcm aku nih mmg nmpk complicated skit kut...
    anyway gud suggestion...

    thanks

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Tue Dec 22, 2009 2:55 pm

    aku validatekan site aku nih guna http://validator.w3.org/

    67 Errors, 63 warning(s)

    banyak gila error...theme nih x smooth kut...

    yg teruknya aku x tau cmne nak repair balik...

    cnth dia tulis: Line 347, Column 133

    tuh line dalam page apa? style.php ker? index.php ker? huhu...

    ada x software yg auto repair error2 nih??

    pasal dropdown menu tuh x jadik2 lagi lorr....
    puas dah aku mintak tolong serata internet nih...
    huhu...

    JOHNBURN duk mano demo??? help me.... Sad

    johnburn
    Moderators
    Moderators

    Gender : Male Number of posts : 755
    Location : Terengganu
    Registration date : 07/03/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by johnburn on Tue Dec 22, 2009 3:10 pm

    ahaha sori aku lupe sbb rmai sngt yg mntk tlg Razz
    mne ngan kje aku lg kn hehe
    nt aku tgk


    --------------------------------------------

    tahukah kamu saat kamu menangis
    adalah air mata ku yang jatuh berlinang
    tahukah kamu saat kamu tersakiti
    adalah aku yang pertama terluka
    Jangan Klik

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 23, 2009 12:34 pm

    tuh la aku tgk...
    smua bergantung dgn kepakaran ko...
    hope ramai lg yg hebat2 join this forum...

    xpe2...
    slow xpe...
    lagi satu tuh jer...
    siap benda tuh siap smua...

    -------------------------

    lupa...
    nih ada update skit...

    FTP Password Update
    We have recently updated FTP software and your FTP password had to be reset.

    All servers and services are working fine at the moment.

    @johnburn

    dah abis update ftp software tuh...
    aku dah tukar balik password dia ke mcm aku bagi ko tuh...okies!

    silentfox
    Ahli Baharu
    Ahli Baharu

    Gender : Male Number of posts : 132
    Location : Bergiat aktif ketika malam!
    Job/hobbies : Layan bola especially EPL!
    Registration date : 18/06/2009

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by silentfox on Wed Dec 30, 2009 12:00 am

    @johnburn

    dia punya password di reset lagi sekali...
    problem btol free host nih...

    tapi aku dah betulkan balik ikut password yg aku kasi ko...

    mana ko nih?? skit je lagi tuh...
    pasal design aku boleh bt sendirik...
    pasal coding nih pening la skit...
    aku ingat simple jer...huhu...

    Sponsored content

    Re: Mega Drop Down Menus with CSS & jQuery in wordpress

    Post by Sponsored content Today at 4:25 am


      Current date/time is Mon Dec 05, 2016 4:25 am