superfish help
Posted: 01 August 2008 06:58 PM   [ Ignore ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

I’ve decided to give superfish menus a shot on my latest site. I’ve set up a dummy template to perfect the code before adding it to the real site. dummy template here.

I added a sub list and that broke the page until I added the sf-menu class to the containing ul tag. Now that I’ve done that, I’m at an impasse and do not know how to proceed.

The one section with a drop down menu isn’t dropping down. Additionally the final menu item is starting on a new line in FF & opera, but missing in IE (this is not so important, I’m sure I can fix that myself) How do I get the drop down menu to appear?

Thank you for your help - if you go to a regular template you can see the simple menu working correctly.

My code as it stands is:

<ul class="sf-menu">
    <
li class="home"><a href="{path=">Home</a></li>
    <
li class="resume"><a href="{path=">Resume</a></li>
    <
li>
        <
ul>
            <
li>resume</li>
            <
li>teaching philosophy</li>
            <
li>teaching demo</li>
        </
ul>
    </
li>
    <
li class="materials"><a href="{path=">Materials</a></li>
    <
li class="studentwork"><a href="{path=">Student Work</a></li>
    <
li class="contact"><a href="{path=">Contact</a></li>
</
ul>
</
div><!-- navigation -->
<
sc*ipt type="text/javascript">

    $(
document).ready(function() {
        
$('ul.sf-menu').superfish();
    
});

</
sc*ipt>
 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
Posted: 02 August 2008 02:34 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  515
Joined  03-01-2006

You don’t seem to have included any of the CSS required to make it work.

 Signature 

John Faulds - Tyssen Design | Member of EE Pro Network

Profile
 
 
Posted: 02 August 2008 02:53 AM   [ Ignore ]   [ # 2 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

ah.. I need to added classes and such? I thought it would get injected by javascript, guess I was wrong. The problem with this superfish is the documentation is rather sparse, just a couple of examples of code and no explanations.

Thanks for the tip, guess I’ll have a look through the CSS stylesheet that I uploaded and try to figure out which classes to add.

 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
Posted: 02 August 2008 04:23 AM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  515
Joined  03-01-2006

You don’t need to add classes, you need to include the CSS from the download page.

 Signature 

John Faulds - Tyssen Design | Member of EE Pro Network

Profile
 
 
Posted: 02 August 2008 05:10 AM   [ Ignore ]   [ # 4 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

I have included that CSS and something wonky is happening, but no drop downs.’

I’ve made some progress in fixing the menu layout in FF, but it’s still borked in opera and IE. The thing is my drop down is still not dropping down and I can’t figure out why.

 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
Posted: 02 August 2008 09:35 PM   [ Ignore ]   [ # 5 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

I’ve made some progress with this and the dropdowns are now appearing. But I’m stuck with styling everything. The biggest problem I’m having is that list items with sublists have huge spaces to the right that break the layout - this space disappears on hover.

I have no idea how to fix that - if I can get that fixed, I’m pretty sure I can get the rest of the menu to look right.

Help much appreciated.

Sean

 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
Posted: 02 August 2008 10:54 PM   [ Ignore ]   [ # 6 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  148
Joined  05-08-2008

Sean - did you change anything in the style sheet? (width, padding, margin?) It looks to me that the padding is whacked in your hover state, and is making the buttons jump when I hover on them.

Also, make the font smaller to cross check the padding and margin and make sure that it’s stable. The font size might be making the nav bar too wide for the space that its in. That seems like its the reason why its spilling over. *I only tested it in Firefox though*

Just a guess…

Try this:

#nav ul, #nav ul ul  {
display : table-cell;
vertical-align : middle;
font-size : 1em;
font-variant : small-caps;
font-weight : bold;
letter-spacing : 0.2em;
padding : 0 5px 0 5px;
}

I shrunk the font (for testing) and balanced the padding. Any luck?

Profile
 
 
Posted: 03 August 2008 07:50 AM   [ Ignore ]   [ # 7 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

I had the menu set up correctly (minus dropdowns) before adding superfish and the submenu. Once I added that things got wacked. I’ve made changes to both my CSS file and the superfish.css file to get to where I am now. Unfortunately the changes I made, broke the original nav (not so bad as I have the CSS backed up).

anyhow I think I’m going to go back to the originals of both files, comment out the relevant CSS on my sheet and play with the superfish one until I get it straitened out. Unfortunately I probably won’t have time for a couple of days.

 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
Posted: 03 August 2008 06:47 PM   [ Ignore ]   [ # 8 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  2082
Joined  05-13-2004

deleted because I’m stupid - problem resolved.

 Signature 

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 77571 Total Logged-in Users: 40
Total Topics: 101561 Total Anonymous Users: 30
Total Replies: 544408 Total Guests: 235
Total Posts: 645969    
Members ( View Memberlist )
Newest Members:  Idril616tonybernardcarterstarksColeJLinskitnealsemperjrawhallshiusbozzlynobluff