Hello,

I created my sidebar using html, css and jquery. The sidebar looks great when I open the html file and everything looks good.

I wanted to include it in my website so used

php include sidebar.html

The sidebar is all disorted. When click on a heading it does not show anything. The alignment is wrong basically everything is wrong.

I have included my CSS file here

/* Page */
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
ul{list-style:none;}


body {font: normal 13px Arial, sans-serif;}
h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}
.wrap {width: 960px; margin: 0 auto;}
.demo-container {padding: 20px 0; width: 200px; float: left;}
.demo-container.right {float: right;}
.demo-container h4 {font-size: 14px; margin: 0 0 5px 0;}
.clear {clear: both;}


.dcjq-vertical-mega-menu .menu{
font: bold 13px Arial, sans-serif; 
line-height: 16px; 
position: relative; /* Required */
border: 1px solid #999;
border-bottom: none;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li a {
display: block; 
color: #000; 
padding: 11px 38px 11px 25px; 
text-shadow: 1px 1px 1px #fff; 
text-decoration: none;
border-bottom: 1px solid #999;
background: url(images/bg_nav.png) repeat-x 0 0;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li a:hover, .dcjq-vertical-mega-menu .menu li.mega-hover a {
background-position: 0 -40px; 
color: #fff; 
text-shadow: 1px 1px 1px #000;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.dcjq-vertical-mega-menu .menu li a .dc-mega-icon {
display: block; 
position: absolute; 
top: 14px; 
right: 15px; 
width: 6px; 
height: 8px; 
background: url(images/arrow_right.png) no-repeat -6px 0;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li a:hover .dc-mega-icon, .dcjq-vertical-mega-menu .menu li.mega-hover a .dc-mega-icon {
background-position: 0 0;
}
/* Mega menu container */
.dcjq-vertical-mega-menu .menu li .sub-container {
position: absolute; /* Required */
overflow: hidden;
background: url(images/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow */
padding: 0 13px 17px 0; /* Padding for drop shadow */
}
.dcjq-vertical-mega-menu .menu li .sub-container .sub {
border: none;
padding: 15px 15px 5px 15px;
background: #fff url(images/bg_grad_top.png) repeat-x 0 0;
border-top: 1px solid #ccc; 
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
}
.dcjq-vertical-mega-menu .menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.dcjq-vertical-mega-menu .menu li .sub li {
float: none; 
width: 160px; 
font-size: 1em; 
font-weight: normal;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.dcjq-vertical-mega-menu .menu li .sub a, .dcjq-vertical-mega-menu .menu.left li .sub a {
background: none; 
border: none; 
text-shadow: none;
float: none;
color: #000; 
display: block;
text-decoration: none; 
font-size: 0.9em;
margin-bottom: 0;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a {
background: url(images/bg_nav.png) repeat-x 0 -40px; 
padding: 5px;
margin-bottom: 5px;
text-transform: uppercase; 
font-weight: bold; 
color: #fff;
text-shadow: 1px 1px 1px #000;
text-align: center;
z-index: 1000;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000; 
text-shadow: none;
}
.dcjq-vertical-mega-menu .menu .sub li.mega-hdr li {margin-bottom: 3px;}
.dcjq-vertical-mega-menu .menu .sub li a {
padding: 3px 3px 3px 15px;
background: url(images/bullet.png) no-repeat 3px 8px;
font-weight: normal;
text-transform: capitalize; font-size: 12px;
}
.dcjq-vertical-mega-menu .menu .sub li a:hover {
color: #fff;
background: #000 url(images/bullet_white.png) no-repeat 5px 8px;
}
.dcjq-vertical-mega-menu .menu .sub ul li {
padding-right: 0;
}

/* Styling for menu items with only 2 levels */
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega .sub {
padding: 10px;
background: #fff;
}
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega li {
padding: 0; 
margin: 0;
width: 150px;
float: none;
}

Any help would be appreciated. I thought that it might be due to JQuery compatibility on the website?

Member Avatar

LastMitch

The sidebar is all disorted. When click on a heading it does not show anything. The alignment is wrong basically everything is wrong.

I am confused are you using PHP to store CSS?

or

You have a html file and want to used PHP include() function to get that CSS?

Member Avatar

diafol

Unless you show the HTML (and any accompanying js/jQ) then this makes little sense in isolation. Better would be a link so we could see it in action in different browsers.

here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Mega Menu Plugin v 1.1</title>
<link href="css/vertical_menu_basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-1').dcVerticalMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'slide',
        direction: 'right'
    });
});
</script>
</head>
<body>
<div class="wrap">


<div class="demo-container clear">
<p style="color: #fff;">
<table cellpadding="0" cellspacing="0" border="0"  style="cursor:pointer;">
<!-- button 1 -->
<tr><td style="width:260px; height:35px;font-size:20px; font-weight:bold; font-family:'Open Sans', Arial, Helvetica, sans-serif; text-align:center;  background-color:#003072; color:#FFFFFF; "
 title="" >Homecare</td></tr></table>
</p>
<div class="dcjq-vertical-mega-menu">
<ul id="mega-1" class="menu">
<li id="menu-item-1"><a href="#">Around The Home</a>
<ul>
<li id="menu-item-4"><a href="#">DISABLED KITCHEN AIDS</a>
<ul>
<li id="menu-item-19"><a href="#">Bibs</a></li>
<li id="menu-item-20"><a href="#">Cups/Mugs/Straws</a></li>
<li id="menu-item-21"><a href="#">Cultery & Kitchen Utensils</a></li>
<li id="menu-item-19"><a href="#">Plates & Dishes</a></li>
<li id="menu-item-20"><a href="#">Kettle Tippers</a></li>
<li id="menu-item-21"><a href="#">Food Preparation</a></li>
<li id="menu-item-21"><a href="#">Disability Tin and Bottle Openers</a></li>
<li id="menu-item-19"><a href="#">Dycem Mats</a></li>
<li id="menu-item-20"><a href="#">Trolleys, Tables & Trays</a></li>
<li id="menu-item-21"><a href="#">Miscellenaous</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">BED & CHAIR</a>
<ul>
<li id="menu-item-19"><a href="#">Rise & Recline Chairs</a></li>
<li id="menu-item-21"><a href="#">Beds & Pressure Relief</a></li>
<li id="menu-item-19"><a href="#">Bed Grab Rails/ Cot Slides</a></li>
<li id="menu-item-20"><a href="#">Pillows & Back Rests</a></li>
<li id="menu-item-21"><a href="#">Cushions</a></li>
<li id="menu-item-21"><a href="#">Overbed/Chair Tables</a></li>
<li id="menu-item-19"><a href="#">Bed & Chair Raisers</a></li>
<li id="menu-item-21"><a href="#">Incontinence</a></li>
<li id="menu-item-20"><a href="#">Bed Pans and Urine Bottles</a></li>
<li id="menu-item-21"><a href="#">Leg Rests/Lifters</a></li>
<li id="menu-item-21"><a href="#">Slide Sheet Boards</a></li>

</ul></li>
<li id="menu-item-7"><a href="#">BATHROOM & TOILET</a>
<ul>
<li id="menu-item-28"><a href="#">Bath Lifts & Seats</a></li>
<li id="menu-item-29"><a href="#">Shower Seats</a></li>
<li id="menu-item-28"><a href="#">Commodes</a></li>
<li id="menu-item-30"><a href="#">Toilet Seats Accessories</a></li>
<li id="menu-item-28"><a href="#">Bedpans & Urine Bottles</a></li>
<li id="menu-item-29"><a href="#">Bath Steps & Mats</a></li>
<li id="menu-item-30"><a href="#">Bottom Wipers and Portable Bidets</a></li>
<li id="menu-item-29"><a href="#">Cleaning/Waste Bins/Gloves</a></li>
<li id="menu-item-30"><a href="#">Hair Washing & Thermometers</a></li>
<li id="menu-item-28"><a href="#">Waterproof Dressing Protectors</a></li>
<li id="menu-item-29"><a href="#">Miscellenaous</a></li>

</ul></li>

<li id="menu-item-8"><a href="#">READING WRITING LOW VISION</a>
<ul>
<li id="menu-item-31"><a href="#">Low Vision & Lighting</a></li>
<li id="menu-item-32"><a href="#">Writing & Computer Aids</a></li>
<li id="menu-item-33"><a href="#">Book Stand/Holders</a></li>
<li id="menu-item-32"><a href="#">Writing & Computer Aids</a></li>
<li id="menu-item-33"><a href="#">Book Stand/Holders</a></li>
<li id="menu-item-32"><a href="#">Clocks & Watches</a></li>
<li id="menu-item-33"><a href="#">Games & Activities</a></li>
</ul>
</li>
<li id="menu-item-10"><a href="#">CARER ALARMS/TELEPHONES</a>
<ul>
<li id="menu-item-37"><a href="#">Door Openers / Intercoms/Bells</a></li>
<li id="menu-item-38"><a href="#">Doormatic Door Opener</a></li>
<li id="menu-item-39"><a href="#">Key Safes& Key Turners</a></li>
<li id="menu-item-37"><a href="#">Nurse Call Systems</a></li>
<li id="menu-item-38"><a href="#">Plugs Electircs</a></li>
<li id="menu-item-39"><a href="#">Telephones & Accessories</a></li>
</ul></li>
<li id="menu-item-11"><a href="#">GARDEN & STEPS</a>
<ul>
<li id="menu-item-40"><a href="#">Gardening</a></li>
<li id="menu-item-41"><a href="#">Steps</a></li>
</ul></li>
</ul>
</li>
<li id="menu-item-2"><a href="#">Mobility</a>
<ul>
<li id="menu-item-4"><a href="#">WALKING AIDS</a>
<ul>
<li id="menu-item-19"><a href="#">3&4Wheel Rollators</a></li>
<li id="menu-item-20"><a href="#">Walking Frames</a></li>
<li id="menu-item-21"><a href="#">Shopping Trolleys</a></li>
<li id="menu-item-19"><a href="#">Walking Trollies</a></li>
<li id="menu-item-20"><a href="#">Zimmer Frames & Accessories</a></li>
<li id="menu-item-21"><a href="#">Walking Sticks</a></li>
<li id="menu-item-19"><a href="#">Crutches & Elbow Seats</a></li>
<li id="menu-item-20"><a href="#">Walking Seats/Crutches</a></li>
<li id="menu-item-21"><a href="#">Miscellaneous</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">WHEELCHAIRS & SCOOTERS</a>
<ul>
<li id="menu-item-25"><a href="#">Power Football Wheelchairs</a></li>
<li id="menu-item-26"><a href="#">Reconditioned Wheelchairs</a></li>
<li id="menu-item-27"><a href="#">Transit Wheelchairs</a></li>
<li id="menu-item-25"><a href="#">Self-Proppeled Wheelchairs</a></li>
<li id="menu-item-26"><a href="#">Reclining Wheelchairs</a></li>
<li id="menu-item-27"><a href="#">Folding Configurable Wheelchairs</a></li>
<li id="menu-item-27"><a href="#">Rigid Configurable Wheelchairs</a></li>
<li id="menu-item-27"><a href="#">Electric Wheelchairs</a></li>
<li id="menu-item-27"><a href="#">Mobility Scooters</a></li>
<li id="menu-item-27"><a href="#">Pushchairs</a></li>

</ul></li>
<li id="menu-item-7"><a href="#">ACCESSORIES</a>
<ul>
<li id="menu-item-25"><a href="#">Scooters All Weather Canopies</a></li>
<li id="menu-item-26"><a href="#">Wheelchair & Scooter Clothing</a></li>
<li id="menu-item-27"><a href="#">Wheelchair Gloves</a></li>
<li id="menu-item-25"><a href="#">Wheelchair & Scooter Bags</a></li>
<li id="menu-item-26"><a href="#">Travel Bags and Storage Covers</a></li>
<li id="menu-item-27"><a href="#">Wheelchair/Scooter Tyres & Tubes</a></li>
<li id="menu-item-27"><a href="#">Batteries & Chargers</a></li>
<li id="menu-item-27"><a href="#">Belts/Harness/Headrests</a></li>
<li id="menu-item-27"><a href="#">Wheelchair Spoke Guards</a></li>
<li id="menu-item-27"><a href="#">Wheelchair Power Packs</a></li>
<li id="menu-item-27"><a href="#">Wheelchair Trays & Tables</a></li>
</ul></li>

<li id="menu-item-8"><a href="#">CUSHION & BACKREST</a>
<ul>
<li id="menu-item-31"><a href="#">Standard Cushion/Backrests</a></li>
<li id="menu-item-32"><a href="#">Jay Cushions</a></li>
<li id="menu-item-33"><a href="#">Aero Tech 4 Cushions</a></li>
<li id="menu-item-31"><a href="#">Flo Tech & ProPad Cushions</a></li>
<li id="menu-item-32"><a href="#">Varilite Cushions</a></li>

</ul>
</li>
<li id="menu-item-10"><a href="#">RAMPS</a>
<ul>
<li id="menu-item-37"><a href="#">Broad Ramps</a></li>
<li id="menu-item-38"><a href="#">Channel Ramps</a></li>
<li id="menu-item-39"><a href="#">Folding Ramps</a></li>
<li id="menu-item-37"><a href="#">Threshold Ramps</a></li>
<li id="menu-item-38"><a href="#">Track Path</a></li>
</ul></li>
</ul>
</li>
<li id="menu-item-2"><a href="#">Hoist/patient Transfer</a>
<ul>
<li id="menu-item-4"><a href="#">HOISTS & LIFTING SLINGS</a>
<ul>
<li id="menu-item-19"><a href="#">Car Hoists</a></li>
<li id="menu-item-20"><a href="#">Gantry Hoists</a></li>
<li id="menu-item-21"><a href="#">Hoist Weighter</a></li>
<li id="menu-item-19"><a href="#">Pool & Bath Hoists</a></li>
<li id="menu-item-20"><a href="#">Wall Mounted Hoists</a></li>
<li id="menu-item-21"><a href="#">Lifting Slings</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">PATIENT TRANSFER & STAND AIDS</a>
<ul>
<li id="menu-item-25"><a href="#">Stand Aids & Rota Stands</a></li>
<li id="menu-item-26"><a href="#">Evcuation & Floor Recovery</a></li>
<li id="menu-item-27"><a href="#">Manual Transfer Sling</a></li>
<li id="menu-item-25"><a href="#">Slide Sheets</a></li>
<li id="menu-item-26"><a href="#">Transfer Sliding Boards</a></li>
<li id="menu-item-27"><a href="#">Handling Belts</a></li>
<li id="menu-item-27"><a href="#">Swivel & Lift Assist Seats</a></li>
</ul></li>

</ul>
</li>

<li id="menu-item-2"><a href="#">Personal Health</a>
<ul>
<li id="menu-item-4"><a href="#">INCONTINENCE CARE</a>
<ul>
<li id="menu-item-19"><a href="#">Ped Pans/ Urine Bottles</a></li>
<li id="menu-item-20"><a href="#">Bedding & Chair Pads</a></li>
<li id="menu-item-21"><a href="#">Bottom Wipers/Bidet</a></li>
<li id="menu-item-19"><a href="#">Cream / Sponges</a></li>
<li id="menu-item-20"><a href="#">Pants & Pads</a></li>
<li id="menu-item-21"><a href="#">Sangenic Bin</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">HEARING AIDS LOOP SYSTEM</a>
<ul>
<li id="menu-item-25"><a href="#">Hearing Aids</a></li>
<li id="menu-item-26"><a href="#">Induction Loops</a></li>
</ul></li>
<li id="menu-item-7"><a href="#">MEDICATION DISPENSORS</a>
<ul>
<li id="menu-item-27"><a href="#">Pill & Medicine Dispencers</a></li>
<li id="menu-item-27"><a href="#">Nebulisers</a></li>
</ul></li>

<li id="menu-item-8"><a href="#">MONITORS</a>
<ul>
<li id="menu-item-31"><a href="#">Blood Pulse, Oxygen Levels & Themometers</a></li>
<li id="menu-item-31"><a href="#">SAD Light Therapy</a></li>
<li id="menu-item-31"><a href="#">Weighting Scales</a></li>

</ul>
</li>
<li id="menu-item-10"><a href="#">PAIN MANAGEMENT</a>
<ul>
<li id="menu-item-31"><a href="#">Pain Relief & First Aid</a></li>
</ul></li>
<li id="menu-item-11"><a href="#">MEDICAL CONDITIONS</a>
<ul>
<li id="menu-item-32"><a href="#">Diabetics</a></li>
</ul></li>
</ul>
</li>
<li id="menu-item-2"><a href="#">Rehab & Exercise</a>
<ul>
<li id="menu-item-4"><a href="#">EXERCISE & REHABILITATION</a>
<ul>
<li id="menu-item-19"><a href="#">Hand Therapy & Massage</a></li>
<li id="menu-item-20"><a href="#">Hydroherapy</a></li>
<li id="menu-item-21"><a href="#">Orthopaedic Supports</a></li>
<li id="menu-item-19"><a href="#">Resistive Exercise Bands</a></li>
<li id="menu-item-20"><a href="#">Sensory Motors/Balance</a></li>
<li id="menu-item-21"><a href="#">Upper/Lower Extremity Exercise</a></li>
<li id="menu-item-21"><a href="#">Mouth Sticks</a></li>

</ul>
</li>
<li id="menu-item-6"><a href="#">TREATMENT ROOM</a>
<ul>
<li id="menu-item-25"><a href="#">Couches, Stools & Screens</a></li>
<li id="menu-item-26"><a href="#">Floor Mats</a></li>
<li id="menu-item-27"><a href="#">Tilt Tables</a></li>
</ul></li>
<li id="menu-item-7"><a href="#">GAMES & ACTIVITIES</a>
<ul>
<li id="menu-item-28"><a href="#">Indoor Games</a></li>

</ul></li>


</ul>
</li>
<li id="menu-item-2"><a href="#">Footwear & Dressing</a>
<ul>
<li id="menu-item-4"><a href="#">FOOT CONFORT</a>
<ul>
<li id="menu-item-19"><a href="#">Circulation Booster</a></li>
<li id="menu-item-20"><a href="#">Creams</a></li>
<li id="menu-item-21"><a href="#">Heel Protectors</a></li>
<li id="menu-item-21"><a href="#">Toe & Bunion Care</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">LADIES FOOTWEAR</a>
<ul>
<li id="menu-item-25"><a href="#">Shoes/Sandals</a></li>
<li id="menu-item-26"><a href="#">Slippers</a></li>
<li id="menu-item-27"><a href="#">Socks/Hosiery</a></li>
</ul></li>
<li id="menu-item-7"><a href="#">GENTS FOOTWEAR</a>
<ul>
<li id="menu-item-25"><a href="#">Shoes/Sandals</a></li>
<li id="menu-item-26"><a href="#">Slippers</a></li>
<li id="menu-item-27"><a href="#">Socks</a></li>
</ul></li>

<li id="menu-item-8"><a href="#">SHOEHORNS/SHOELACES</a>
<ul>
<li id="menu-item-31"><a href="#">Shoehorns</a></li>
<li id="menu-item-32"><a href="#">Shoelaces</a></li>

</ul>
</li>
<li id="menu-item-10"><a href="#">DRESSING & GROOMING</a>
<ul>
<li id="menu-item-37"><a href="#">Dressing</a></li>
<li id="menu-item-38"><a href="#">Grooming</a></li>

</ul></li>
<li id="menu-item-11"><a href="#">MISCELLANEOUS</a>
<ul>
</ul></li>
</ul>
</li>



</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

and I am calling the html file in my website index.php

        <?php
  include 'sidebar.html';
?>

your sitebar.html is a complete html including <htm><head> and <body> tags
If you include this like so it will be part of an other html page that has its onw <htm><head> and <body> tags
That messes thinks up.
Change your sidebar.html so that it is only the div containg the actual sidebar,
include the jquery links on the calling page

Thanks pzuurveen. However if I remove the divs, css will be messed up.

Could you give me more details on how to change the html file?

Thanks

move this part to the <header> section of the calling page

  <link href="css/vertical_menu_basic.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
    <script type="text/javascript">
    $(document).ready(function($){
    $('#mega-1').dcVerticalMegaMenu({
    rowItems: '3',
    speed: 'fast',
    effect: 'slide',
    direction: 'right'
    });
    });
    </script>

remove everything outside the <body> tag including the tag it self