www.webdeveloper.com
Results 1 to 12 of 12

Thread: dropdown menu uses javascript and css. css over-riding issue

  1. #1
    Join Date
    May 2014
    Posts
    8

    dropdown menu uses javascript and css. css over-riding issue

    I have pre-built javascript and css code that creates a dropdown menu that works. It can be seen here at www.loudounfreedom.com. Hover over the TEAMS navigation item. That is how it should look. However I have a page that is built using div columns in which the menu appears differently. That page is password protected and so have to give it out separately. The different effect has an extended shadow, the text is smaller and the background and items do not extend all the way to the right as you see on the index.html page. If someone can help, I will provide means to view the "problem" page. Can provide code

  2. #2
    Join Date
    May 2014
    Posts
    8
    help...

  3. #3
    Join Date
    Feb 2014
    Location
    india
    Posts
    14
    you need to show the codes you have written so far..

  4. #4
    Join Date
    Feb 2014
    Location
    Dubai, UAE
    Posts
    149
    Share your code what have you written.

  5. #5
    Join Date
    May 2014
    Posts
    8
    the css for the menus

    .selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
    background: #092869
    }

    /* ######### Default class for drop down menus ######### */

    .anylinkmenu{
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 1px solid navy;
    border-bottom-width: 0;
    font: normal 12px Verdana;
    line-height: 18px;
    z-index: 100; /* zIndex should be greater than that of shadow's below */
    background: ffffff;
    color: #092869;
    width: 200px; /* default width for menu */
    }

    .anylinkmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #092869;
    }

    .anylinkmenu ul li a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid navy;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    text-indent: 5px;
    color: #092869;
    }

    .anylinkmenu a:hover{ /*hover background color*/
    background: #E99A02;
    color: #092869;
    }

    /* ######### Alternate multi-column class for drop down menus ######### */


    .anylinkmenucols{
    position: absolute;
    width: 350px;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 1px solid navy;
    padding: 10px;
    font: normal 12px Verdana;
    z-index: 100; /*zIndex should be greater than that of shadow's below*/
    background: #E99A02;
    }

    .anylinkmenucols li{
    padding-bottom: 3px;
    color: #092869;
    }

    .anylinkmenucols .column{
    float: left;
    padding: 3px 3px;
    margin-right: 5px;
    background: #092869;

    }

    .anylinkmenucols .column ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }



    /* ######### class for shadow DIV ######### */


    .anylinkshadow{ /*CSS for shadow. Keep this as is */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99; /*zIndex for shadow*/
    background: #092869;
    visibility: hidden;
    }

  6. #6
    Join Date
    May 2014
    Posts
    8
    the js for the menu content

    var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
    anylinkmenu1.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
    anylinkmenu1.items=[
    ["3rd Grade (Fagan)", "teams/2014Fagan3.html"],
    ["4th Grade (Esser)", "teams/2014Esser.html"],
    ["4th Grade (Haines)", "teams/2014Haines.html"],
    ["4th Grade (Stimart)", "teams/2014Stimart.html"],
    ["5th Grade (Cohoon)", "teams/2014Cohoon.html"],
    ["5th Grade (Randall)", "teams/2014Randall.html"],
    ["5th Grade (T.Turner)", "teams/2014TTurner.html"],
    ["6th Grade (Fagan)", "teams/2014Fagan.html"],
    ["6th Grade (Webb)", "teams/2014Webb.html"],
    ["6th Grade (Williams)", "teams/2014Williams.html"],
    ["7th Grade (Berry)", "teams/2014Berry.html"],
    ["7th Grade (McFarlane)", "teams/2014McFarlane.html"],
    ["7th Grade (Tim)", "teams/2014TIm.html"],
    ["8th Grade (Hills)", "teams/2014Hills.html"],
    ["8th Grade (Turner)", "teams/2014Turner.html"],
    ["10th Grade (Clarke)", "teams/2014Clarke.html"],
    ["10th Grade (McFarlane)", "teams/2014McFarlaneHS.html"] //no comma following last entry!
    ]

    var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
    anylinkmenu2.items=[
    ["General FAQs", "faq.html"],
    ["Tryout FAQs", "faq2.html"],
    ["Parent Center", "parentcenter.html"] //no comma following last entry!
    ]


    var anylinkmenu3={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
    anylinkmenu3.items=[
    ["Coaching Resources", "coach/resources.html"],
    ["Coaches Roles", "coach_roles.html"],
    ["Coaching Application", "coaching_application.html"] //no comma following last entry!
    ]

    var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:185px;', linktarget:''}
    anylinkmenu4.cols={divclass:'column', inlinestyle:'width:185px;'} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
    anylinkmenu4.items=[
    ["3rd Grade (Fagan)", "../teams/2014Fagan3.html"],
    ["4th Grade (Esser)", "../teams/2014Esser.html"],
    ["4th Grade (Haines)", "../teams/2014Haines.html"],
    ["4th Grade (Stimart)", "../teams/2014Stimart.html"],
    ["5th Grade (Cohoon)", "../teams/2014Cohoon.html"],
    ["5th Grade (Randall)", "../teams/2014Randall.html"],
    ["5th Grade (T.Turner)", "../teams/2014TTurner.html"],
    ["6th Grade (Fagan)", "../teams/2014Fagan.html"],
    ["6th Grade (Webb)", "../teams/2014Webb.html"],
    ["6th Grade (Williams)", "../teams/2014Williams.html"],
    ["7th Grade (Berry)", "../teams/2014Berry.html"],
    ["7th Grade (McFarlane)", "../teams/2014McFarlane.html"],
    ["7th Grade (Tim)", "../teams/2014TIm.html"],
    ["8th Grade (Hills)", "../teams/2014Hills.html"],
    ["8th Grade (Turner)", "../teams/2014Turner.html"],
    ["10th Grade (Clarke)", "../teams/2014Clarke.html"],
    ["10th Grade (McFarlane)", "../teams/2014McFarlaneHS.html"] //no comma following last entry!
    ]

    var anylinkmenu5={divclass:'anylinkmenu', inlinestyle:'width:125px;', linktarget:''} //Second menu variable. Same precaution.
    anylinkmenu5.items=[
    ["General FAQs", "../faq.html"],
    ["Tryout FAQs", "../faq2.html"],
    ["Parent Center", "../parentcenter.html"] //no comma following last entry!
    ]

    var anylinkmenu6={divclass:'anylinkmenu', inlinestyle:'width:170px;', linktarget:''} //Third menu variable. Same precaution.
    anylinkmenu6.items=[
    ["Coaching Resources", "resources.html"],
    ["Coaches Roles", "../coach_roles.html"],
    ["Coaching Application", "../coaching_application.html"] //no comma following last entry!
    ]

  7. #7
    Join Date
    May 2014
    Posts
    8
    the page that shows the issue. forgive the 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Loudoun Freedom: 2014 Teams - Berry</title>
    <link rel="stylesheet" type="text/css" href="../files/freedom.css">
    <link rel="stylesheet" type="text/css" href="../files/anylinkmenu.css" />
    <script type="text/javascript" src="../files/menucontents.js"></script>
    <script type="text/javascript" src="../files/anylinkmenu.js"></script>
    <script type="text/javascript">
    //anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
    anylinkmenu.init("menuanchorclass")</script>
    <style type="text/css">
    ul {
    font-family: Calibri;
    font-size: 13px;
    line-height: 8px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    float: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    }
    li ul {
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #092869;
    line-height: 8px;
    border-top: 1px solid #ffffff;
    padding: 6px 2px 6px 2px;
    background: #ffffff;
    margin-left: 1px;
    white-space: nowrap;
    }
    ul li a:hover {
    color: #120250;
    background-color: #E99A02;
    }
    li:hover ul {
    display: block;
    position: absolute;
    }
    li:hover li {
    float: none;
    font-size: 13px;
    }
    li:hover a { background: #ffffff; }
    li:hover li a:hover {
    color: #120250;
    background-color: #E99A02;
    }

    </style>
    </head>

    <body bgcolor="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
    <div id="page">

    <div id="top">
    <img src="../images/banner.jpg" width="1350" height="150" border="0">
    </div>

    <div id="headerslice">
    <img src="../images/spacer.gif" width="1" height="5" border="0">
    </div>

    <div id="navbar">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#120250" >
    <td width="110"><a href="../index.html"><img src="../images/home.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../about.html"><img src="../images/about.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../teams.html" class="menuanchorclass" rel="anylinkmenu4" data-image="../images/teams.gif" data-overimage="../images/teams_on.gif"><img src="../images/teams.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../coach.html" class="menuanchorclass" rel="anylinkmenu6" data-image="../images/coaches.gif" data-overimage="../images/coaches_on.gif"><img src="../images/coaches.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../events.html"><img src="../images/events.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../registration.html"><img src="../images/registration.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../faq.html" class="menuanchorclass" rel="anylinkmenu5" data-image="../images/faqs.gif" data-overimage="../images/faqs_on.gif"><img src="../images/faqs.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../spiritwear.html"><img src="../images/spiritwear.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../sponsors.html"><img src="../images/sponsors.gif" width="110" height="25" border="0"></a></td>
    <td width="110" align="left"><a href="../links.html"><img src="../images/links.gif" width="110" height="25" border="0"></a></td>
    </tr>
    </table>
    </div>

    <div id="leftside">
    <table width="98%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top"><p><img src="../images/logo2_freedom.jpg" width="99" height="85" border="0" alt="Freedom Logo"></p>
    <p><a href="history_berry.html" class="sidenav">Historical Record</a></p>
    <ul id="menu">
    <li><a href="#">Team Photos</a>
    <ul>
    <li><a href="photos9_berry.html">7th Grade - Challenge</a></li>
    <li><a href="photos8_berry.html">7th Grade - MD Flames</a></li>
    <li><a href="photos7_berry.html">7th Grade - Paul VI</a></li>
    <li><a href="photos6_berry.html">7th Grade - JMU</a></li>
    <li><a href="photos5_berry.html">MD Flames - Nov 2</a></li>
    <li><a href="photos4_berry.html">7th Grade - FLG</a></li>
    <li><a href="photos3_berry.html">MD Flames - Oct 12</a></li>
    <li><a href="photos2_berry.html">MD Flames - Sept 28</a></li>
    <li><a href="photos1_berry.html">MD Flames - Sept 14</a></li>
    </ul>
    </li>
    </ul>
    </td>
    </tr>
    </table>
    </div>

    <div id="coach">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="18%">&nbsp;</td>
    <td width="18%">&nbsp;</td>
    <td width="16%">&nbsp;</td>
    <td width="16%">&nbsp;</td>
    <td width="16%">&nbsp;</td>
    <td width="16%">&nbsp;</td>
    </tr>
    <tr class="title">
    <td colspan="5">&nbsp;7th Grade - Berry<br>&nbsp;</td>
    <td align="right">Spring 2014&nbsp;&nbsp;<br>&nbsp;</td>
    </tr>
    <tr class="section" bgcolor="#E99A02" valign="middle">
    <td>&nbsp;Head Coach</td>
    <td>&nbsp;Assistant Coach</td>
    <td colspan="4"><br />&nbsp;</td>
    </tr>
    <tr class="body">
    <td>&nbsp;Peter Berry<br />
    &nbsp;<a href="mailto:berry@loudounfreedom.com" class="body">berry@loudounfreedom.com</a></td>
    <td>&nbsp;John Fenton<br />
    &nbsp;<a href="mailto:fenton@loudounfreedom.com" class="body">fenton@loudounfreedom.com</a></td>
    <td colspan="4">&nbsp;</td>
    </tr>
    </table>
    </div>


    <div id="collage4">

    <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><img src="images/berry_teamcollage.jpg" width="900" height="661" /></td>
    </tr>
    </table>
    </div>

    <div id="roster">
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
    <tr>
    <td class="body" align="left" valign="top"><p class="section">Team Roster:</p>
    <p class="body">Hope Alston<br />
    Katana Alston<br />
    Izzy Berry<br />
    Lydia Ditthardt<br>
    Micaela Elhafdi<br>
    Emma Fenton<br />
    Noelle Foster<br>
    Jillian Hacker<br />
    Shayna Lubitz<br />
    Grace Lynch<br />
    Karleigh Pollock<br />
    Laryssa Wade<br /></p></td>
    </tr>
    </table>
    </div>

    <div id="rightimage4">
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="95%" class="noborder">
    <tr>
    <td class="body" align="center" border="0">
    <img src="../images/freedomlooks1_sm.jpg" width="248" height="165" border="0" />
    </td>
    </tr>
    <tr>
    <td align="center" valign="bottom"><img src="../images/basketball_animated.gif" width="60" height="100" border="0" />
    </td>
    </tr>
    </table>
    </div>

    <div id="calendar4">
    <table width="99%" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td align="left" ><p class="section">&nbsp;&nbsp;Team Calendar:</p>
    <p align="center"><iframe src="https://www.google.com/calendar/embed?height=430&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=c79m79rnr039k92jf102051be8%40group.calenda r.google.com&amp;color=%23182C57&amp;ctz=America%2FNew_York" style=" border-width:0 " width="650" height="430" frameborder="0" scrolling="no"></iframe></p>
    </td>
    </tr>
    </table>
    </div>

    <div id="teamrecord4">
    <table width="99%" cellpadding="0" cellspacing="0">
    <tr>
    <td align="left" valign="top"><p class="section">&nbsp;&nbsp;Team Season Record: 4-7</p>
    <table width="99%" cellspacing="0" cellpadding="0" align="center" class="define2">
    <tr align="left" class="section">
    <th width="20%">Date</th>
    <th width="60%">Opponent</th>
    <th width="20%">Result</th>
    </tr>
    <tr class="body">
    <td>3/22/14</td>
    <td>Gainesville Elite Tigers (Soltys)</td>
    <td>L</td>
    </tr>
    <tr class="body">
    <td>3/22/14</td>
    <td>Spotsy Sting (Via)</td>
    <td>L</td>
    </tr>
    <tr class="body">
    <td>5/11/14</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="body">
    <td>5/17/14</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>

    <div id="footer4">
    <br><hr width="100%">For information, contact the Loudoun Freedom at <a href="mailto:loudounfreedombball@gmail.com">loudounfreedombball@gmail.com</a>
    </div>

    </div>
    </body>
    </html>

  8. #8
    Join Date
    May 2014
    Posts
    8
    sample of the freedom.css that is used for other reasons

    #top {
    width:1350px;
    height:150px;
    background-color:#ffffff;
    text-decoration:none;
    position: absolute;
    top: 0px;
    }

    #headerslice {
    width:1350px;
    height:5px;
    background-color:#e99a02;
    text-decoration:none;
    position: absolute;
    top:150px;
    }

    #navbar {
    width:1350px;
    height:25px;
    background-color:#120250;
    text-decoration:none;
    position: absolute;
    top: 154px;
    }

    #coach {
    width:1205px;
    background-color:#ffffff;
    text-decoration:none;
    position: absolute;
    top: 185px;
    left:150px;
    text-align: left;
    }

    #collage4{
    width:900px;
    height:661px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
    position: absolute;
    top: 355px;
    left:150px;
    }

    #roster{
    width:270px;
    height:320px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
    position: absolute;
    top: 355px;
    left:1062px;
    font-size: 12pt;
    font-family: Calibri;
    font-style: normal;
    font-weight: 200;
    color: #092869;
    }

    #rightimage4{
    width:270px;
    height:325px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
    position: absolute;
    top:690px;
    left:1062px;
    }

    #calendar4{
    width:665px;
    height:490px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
    position: absolute;
    top: 1031px;
    left:150px;
    vertical-align:middle;
    }

    #teamrecord4{
    width:502px;
    height:490px;
    background:#FFFFFF;
    border:3px;
    border-color:#E99A02;
    border-style:solid;
    text-decoration:none;
    font-family:Calibri;
    position: absolute;
    top: 1031px;
    left:830px;
    }

    #footer4 {
    width:88%;
    background:#ffffff;
    text-decoration:none;
    position: absolute;
    top: 1526px;
    left:155px;
    font-size: 12pt;
    font-family: Calibri;
    font-style: normal;
    font-weight: 200;
    color: #092869;
    }

    #page {
    background:#FFFFFF;
    margin:0 auto 0 auto;
    margin-left:auto;
    margin-right:auto;
    width:1350px;
    text-align: center;
    border:1px solid #e99a02;
    border-left: 1px solid #e99a02;
    border-right: 1px solid #e99a02;
    border-bottom: 1px solid #e99a02;
    border-color: #e99a02;
    position: relative;
    }

  9. #9
    Join Date
    May 2014
    Posts
    8
    http://www.loudounfreedom.com/2014Berry.html

    contrasted with
    http://www.loudounfreedom.com/

    hover over the TEAMS navigation image.

  10. #10
    Join Date
    May 2014
    Posts
    915
    Any time someone says you need JavaScript for a menu, don't... just ... don't... they're blowing smoke up your backside and don't know enough about web development to be giving you any sort of advice...

    Now, that said, what you are doing there doesn't need ANY scripting, but really you've got deep rooted issues site-wide that I'd be trying to address before you could even TRY to fix the menu. The entire layout concept is flawed being a static fixed width with font sizes declared in pixels, but under the hood things are far, far worse.

    The first line proudly proclaims much of the problem -- transitional, which is to say "in transition from 1997 to 1998 coding practices". Tranny is for using HTML 4 elements in a HTML 3.2 document, and was never meant for writing new websites! The deprecated attributes like bgcolor, align, topmargin, border... well... really have no business in any website that was written after 1997; mated to the images doing text's job, tables for layout, and pretty much endless code bloat is just begging for this site to be a maintenance nightmare and accessibility train-wreck. It's no wonder you're having trouble integrating a semi-modern concept like a dropdown menu to it.

    It's 13k of markup delivering 1.7k of plaintext, easily twice what should be needed for such a simple page.

    I would HIGHLY suggest tossing the entire mess, and starting over with semantic markup, separation of presentation from content, a RECOMMENDATION doctype (HTML 4 Strict or XHTML 1.0 Strict) and try to get a semi-flud, elastic and responsive layout on that. Right now you are so knee-deep in presentational markup and outdated practices, any advice people give you are little more than trying to use duct-tape, bubblegum and bailing wire to fix a leak in the Hoover dam.

    That might sound harsh, but it's probably better someone tell you this NOW as the deeper down you dig yourself on your current approach, the harder the crawl out is going to be.

  11. #11
    Join Date
    May 2014
    Posts
    8
    Thanks for the feedback on everything else. It serves the purpose and doesn't need to be changed. So I will still look to fix the issue that I face now.

  12. #12
    Join Date
    Mar 2014
    Location
    UAE
    Posts
    98
    it's a long code.. paste the code is note pad and then share here

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles