locked
Totally Confused with "Simple" Menu Walkthrough Example RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User965858330 posted

    I have worked with several different programming languages but these adapters seem anything but simple to me.

    I have read this:

    Build a Simple Page that Can Use the Kit's Adapters

    and this:

    and this:

    Using These Adapters in Your Web Site

     But I cannot get my web app menu to look like the ones in the example (WaldThru/SimpleMenu.aspx)(<asp:Menu ID="EntertainmentMenu" >.... </asp:Menu> )

    So I put the SImpleMenu.css in my project and renamed it and renamed href= but it still looks like a non-collapsable bulleted list of links for the menu instead of the background colored horizontal flyout one in the example.

    I have even coppied the entire code block for the entertainment menu and put it in place of mine, I get the text but not the style.

    I'm trying to figure out what else I could be missing.

    Do you have to create a complex css file everytime you do a menu like this? If so its not simple.
    I already had a nice looking menu I did with VS2008 and the style I wanted but it didn't have the post back functionality this one did which I really need.

     

     

    Monday, March 24, 2008 9:07 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-775617020 posted

    I suggest u to add

    1. A new folder App_Browser which contains CSSFriendlyAdapters.browser

    2. A new folder App_Code which contains a folder named Adapters containing files - MenuAdapter.cs and WebControlAdapterExtender.cs

    3. A new folder CSS containing two css files - Import.css and menu.css

    4. A new folder Javascript containing AdapterUtils.js and MenuAdapters.js files

    5. SimpleMenu.css in which u can add ur own style specifications

    and then try it out if it works

    Hope this can help u

    Wednesday, March 26, 2008 3:42 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User965858330 posted

    I suggest u to add

    1. A new folder App_Browser which contains CSSFriendlyAdapters.browser

    2. A new folder App_Code which contains a folder named Adapters containing files - MenuAdapter.cs and WebControlAdapterExtender.cs

    3. A new folder CSS containing two css files - Import.css and menu.css

    4. A new folder Javascript containing AdapterUtils.js and MenuAdapters.js files

    5. SimpleMenu.css in which u can add ur own style specifications

    and then try it out if it works

    Hope this can help u

     

    Yes I already added those to my project as explained in the example.

    It still didn't work.

    I am wondering if something in the web.config needed to be added?

    Friday, March 28, 2008 8:37 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-775617020 posted

    One more thing u can try -

    Create new wesite and select CSS friendly adapter template.

    In that template you'll get all the adapter controls.

    Delete all the files except files mentioned in previous reply.

    Then copy and paste pages from your website to this new website  .

    See if it works or not...

    Because the CSS friendly adapter do not need any specifications in web.config file as per my knowledge. 

    Saturday, March 29, 2008 7:55 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-656867934 posted

    Please post the rendered HTML and the ASPX page. I'll take a look at it.

    -Mike

    Friday, April 4, 2008 3:40 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-775617020 posted

    The SimpleMenu.aspx code is:

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head id="Head1" runat="server">

    <title>Home Page</title>

    <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />

    <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="Link1" />

    <!--[if lt IE 7]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" mce_href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

    <![endif]-->

    </head>

    <body bgcolor="#564f50">

    <form id="form2" runat="server">

    &nbsp;

    <table border="0" cellpadding="0" cellspacing="0" style="left: 60px; ;

    top: 0px; width: 857px;">

    <tr>

    <td style="width: 100px" valign="top">

    <table border="0" cellpadding="0" cellspacing="0" style="width: 860px; height: 526px;

    background-color: white">

    <tr>

    <td colspan="24" style="height: 61px; background-color: white">

    </td></tr><tr> <td colspan="24" style="border-right: white 1px solid; border-top: white 1px solid;

    border-left: white 1px solid; border-bottom: white 1px solid; height: 20px; background-color: #eeeeee"

    valign="top">

    <asp:Menu ID="Menu7" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu" Width="373px">

    <Items>

    <asp:MenuItem Text="About Us" Selectable="False" Value="About Us">

    <asp:MenuItem Text="Company Profile" Value="Company Profile" />

    <asp:MenuItem Text="Customers" Value="Customers" />

    <asp:MenuItem Text="Quality" Value="Quality">

    <asp:MenuItem Text="Product 1" Value="Product 1" />

    <asp:MenuItem Text="Product 2" Value="Product 2" />

    </asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="Products" Selectable="False" Value="Contact Us">

    <asp:MenuItem Text="Product 1" Value="Product 1" />

    <asp:MenuItem Text="Product 2" Value="Product 2" />

    <asp:MenuItem Text="Product 3" Value="Product 3" />

    <asp:MenuItem Text="Product 4" Value="Product 4" />

    </asp:MenuItem>

    <asp:MenuItem Text="Services" Selectable="False" Value="Services">

    <asp:MenuItem Text="Service Centers" Value="Service Centers" />

    <asp:MenuItem Text="Service Types" Value="Service Types" />

    </asp:MenuItem>

    <asp:MenuItem Text="Contact Us" Selectable="False" Value="Contact Us">

    <asp:MenuItem Text="Brach Locations" Value="Brach Locations" />

    <asp:MenuItem Text="Service Centers" Value="Customer Service Centers" />

    </asp:MenuItem>

    </Items>

    </asp:Menu>

    </td></tr><tr>

    <td style="width: 46px; height: 316px">

    </td>

    <td colspan="10" style="font-size: 10pt; line-height: 150%; font-family: verdana;

    height: 316px; text-align: justify" valign="top">

    <br />

    </td>

    <td colspan="1" style="font-size: 10pt; line-height: 150%; font-family: verdana;

    height: 316px; text-align: justify; width: 8338px;" valign="top">

    </td> <td colspan="11" style="height: 316px" align="center" valign="middle">

    </td>

    <td style="width: 1873px; height: 316px">

    </td></tr><tr>

    <td colspan="6" style="font-weight: bold; font-size: 11pt; font-family: verdana;

    height: 25px; background-color: #969594; border-right: white 1px solid;">

    &nbsp;Events</td>

    <td colspan="6" style="font-weight: bold; font-size: 11pt; font-family: verdana;

    height: 25px; background-color: #969594; border-right: white 1px solid;">

    &nbsp;News</td>

    <td colspan="6" style="font-weight: bold; font-size: 11pt; font-family: verdana;

    height: 25px; background-color: #969594; border-right: white 1px solid;">

    &nbsp;New Launches</td>

    <td colspan="6" style="font-weight: bold; font-size: 11pt; font-family: verdana;

    height: 25px; background-color: #969594; text-decoration: none">

    &nbsp;Latest Updates</td></tr>

    <tr>

    <td colspan="6" style="height: 100px">

    </td>

    <td colspan="6" style="height: 100px">

    <br />

    </td>

    <td colspan="6" style="height: 100px">

    </td>

    <td colspan="6" style="height: 100px">

    </td></tr><tr>

    <td style="width: 46px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 97px; height: 18px; background-color: red">

    </td>

    <td style="width: 192px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 7482px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 82px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 102px; height: 18px; background-color: red">

    </td>

    <td style="height: 18px; background-color: red; width: 8338px;">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 83px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 7187px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 91px; height: 18px; background-color: red">

    </td>

    <td style="width: 100px; height: 18px; background-color: red">

    </td>

    <td style="width: 89px; height: 18px; background-color: red">

    </td>

    <td style="width: 6627px; height: 18px; background-color: red">

    </td>

    <td style="width: 1873px; height: 18px; background-color: red">

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table></form></body></html>

     

    and  SimpleMenu.css code snippet is :

    .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */

    {

    width: 700px; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */

    }

    .SimpleEntertainmentMenu ul.AspNet-Menu ul /* Tier 2 */

    {

    width: 100px;

    top: 100%;

    left: 0;

    }

    .SimpleEntertainmentMenu ul.AspNet-Menu ul ul /* Tier 3+ */

    {

    top: -0.5em;

    left: 6em;

    }

    .SimpleEntertainmentMenu li /* all list items */

    {

    width: 150px;

    background: #eeeeee;

    }

    .SimpleEntertainmentMenu li:hover, /* list items being hovered over */

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover

    {

    background: Black;

    }

    .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */

    .SimpleEntertainmentMenu span

    {

    color: Black;

    padding: 4px 2px 4px 8px;

    border:1px solid #cccccc;

    background: transparent url(arrowRight.gif) right center no-repeat;

    }

    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */

    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span

    {

    background-image: none !important;

    }

    .SimpleEntertainmentMenu li:hover a, /* hovered text */

    .SimpleEntertainmentMenu li:hover span,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,

    .SimpleEntertainmentMenu li:hover li:hover a,

    .SimpleEntertainmentMenu li:hover li:hover span,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,

    .SimpleEntertainmentMenu li:hover li:hover li:hover a,

    .SimpleEntertainmentMenu li:hover li:hover li:hover span,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span

    {

    color: White;

    background: transparent url(activeArrowRight.gif) right center no-repeat;

    }

    .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */

    .SimpleEntertainmentMenu li:hover li span,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,

    .SimpleEntertainmentMenu li:hover li:hover li a,

    .SimpleEntertainmentMenu li:hover li:hover li span,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,

    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span

    {

    color: Black;

    background: transparent url(arrowRight.gif) right center no-repeat;

    }

    .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */

    {

    border: solid 1px #00ff00 !important;

    }

    .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */

    {

    border: solid 1px #ff0000 !important;

    }

    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */

    {

    border: solid 1px #0000ff !important;

    }

    #EntertainmentMessage

    {

    padding-top: 2em;

    clear: both;

    }

    and following files are present in web app with SimpleMenu.aspx

    1. A folder App_Browser which contains CSSFriendlyAdapters.browser

    2. A folder App_Code which contains a folder named Adapters containing files - MenuAdapter.cs and WebControlAdapterExtender.cs

    3. A folder CSS containing two css files - Import.css and menu.css

    4. A folder Javascript containing AdapterUtils.js and MenuAdapters.js files

    5. SimpleMenu.css in which u can add ur own style specifications

    try this.

    Saturday, April 5, 2008 3:19 AM