Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Help integrating new CSS menu

Posted on 2011-02-28
2
Medium Priority
?
225 Views
Last Modified: 2012-05-11
Hello Experts,

We would like to integrate Superfish CSS menu (http://users.tpg.com.au/j_birch/plugins/superfish/) into our site design, but have a conflict with our current stylesheet that prevents the popout menu items from appearing in the correct location.  If you open the attached zip you will find index.html which is our current design, and an example page superfish.html which is a test implementation with the new menu.

Any help with resolving this would be appreciated.
ncas-2011-rev1.zip
0
Comment
Question by:sonic1234
2 Comments
 
LVL 12

Accepted Solution

by:
zappafan2k2 earned 2000 total points
ID: 35003961
There are seemingly a bunch of problems.  I'll see if I can remember them all...

You didn't include the "jquery-1.5.1.min.js" or the "supersubs.js" files
The other javascript file includes are syntactically incorrect [see below]
Interestingly, it wasn't CSS that was completely creating the problem you posted - you need to add the class "sf-vertical" to the first ul tag (id sample-menu-1)

Your javascript includes have the following syntax:
<src="js/hoverIntent.js"></script>

Open in new window

This should be
<script type="text/javascript src="js/hoverIntent.js"></script>

Open in new window

Make these changes, and you're almost there.  Now it's just a matter of removing the line
margin:12px 0 0 0;

Open in new window

from the file styles/base.css

Give that a try, and see how you make out.
0
 

Author Comment

by:sonic1234
ID: 35003999
Thank you for your help zappafan2k2 - all working now.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month12 days, 13 hours left to enroll

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question