Cool drop down menus. The site seems to float left for some reason though. Not sure if by intention, most just being centered with auto margins. Possibly just Chrome I don't know.
Anyways Great Work
Curt Wheeler
Get nop Themes @ 100development.com
nopNatural
- 11
- 65
- 8/30/2009
- United States
Thanks Curt. Yes, you are correct about the layout not centering because of the use of auto margins for the variable width. The layout flaots left in firefox and chrome,so if I stay with this design, I have some more css work to do for compatibility. The right border graphic was just a quick photoshop image for layout purposes and will be replaced with a higher quality image.
This is just a side project that I have been playing around with for a few weeks. The asp:menu was thrown in as a side project to see how easy it would be to style a dynamic menu with the css friendly adapter. Ihaven't decided whether to use it, remove the nop menus in the left column, move the left column right, and use it for ad space, or to just remove the dynamic menu and use the standard design so that the site will be easier to upgrade later.
Since the css friendly adapter controls the styling for the asp:menu control in the admin pages, all other asp:menu controls also have be styled by css stylesheet. the steps to creating the menu is to:
1) create a sitemap in the nopCommerceStore root directory, and using xml, add the menu items and hyperlinks that you want to appear in your menu. Here is an example from my bottom sitemap.
2) add the sitemap provider code in web.config that defines the new sitemap. In the example below, I added two sitemap providers into system.web If you only want one menu, you only need to add one new sitemap provider. My new sitemaps were named top and bottom.
3) copy the css file nopCommerceStore/App_themes/administration/menu.css onto your clipboard, and then paste it into your current theme folder with the existing style sheets that style the store.
4) Rename the new stylesheet storeMenu.css
5) In the new storeMenu.css stylesheet, rename all of the css classes that are presntly named .AdminMenu to .StoreMenu and save.
6) next you have to decide if you want to just create a new div in the root.master file, and drop a sitemap provider and asp:menu controls into it, or if you want to create a new web user control file in in the nopCommerceStore/modules folder, and then create you div and menu controls there. I used the latter method, but just creating a div wherever you want it, and dropping the menu and sitemap provider controls into it should work just as well.
7) Regardless of how you decide to place your menu on the page, the last step is to define your sitemap provider and css stylesheet in the controls. Here's my example for the div and controls. remember once again that my menu at http://ethospoint.com/nopcommerce/ is actually two horizontal menus positioned one on top of the other. If you just want one, then you only need one set of controls, and one sitemap.
...anyway, I'm taking all of this from memory but I'm pretty sure this is all of the steps to create an asp:menu control in nopCommerce. I'll also cross post this into the css and styling forum.
..........late note: and yes I did forget something, this method will render a menu that looks the same as the the one in the admin section, so you will also need some of the images from the nopCommerceStore/App_themes/administration/images folder. I restyled the entire new stylesheet for my menu with new images included so I didn't do this. If you want the same style of menu that is found in the admin section, you will have to determine which images are used there and copy them into your "theme"/images folder.
This is just a side project that I have been playing around with for a few weeks. The asp:menu was thrown in as a side project to see how easy it would be to style a dynamic menu with the css friendly adapter. Ihaven't decided whether to use it, remove the nop menus in the left column, move the left column right, and use it for ad space, or to just remove the dynamic menu and use the standard design so that the site will be easier to upgrade later.
Since the css friendly adapter controls the styling for the asp:menu control in the admin pages, all other asp:menu controls also have be styled by css stylesheet. the steps to creating the menu is to:
1) create a sitemap in the nopCommerceStore root directory, and using xml, add the menu items and hyperlinks that you want to appear in your menu. Here is an example from my bottom sitemap.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="blog.aspx" title="Blog" description="" />
<siteMapNode url="ContactUs.aspx" title="About NopNatural" description="" />
<siteMapNode url="RecentlyAddedProducts.aspx" title="New Products" description="" >
<siteMapNode url="~/Products/86-custom-t-shirt.aspx" title="New Tee-shirt" description="T-Shirt - Add Your Content " />
<siteMapNode url="~/Products/87-the-battle-of-los-angeles.aspx" title="Digital Download" description="The Battle Of Los Angeles by Rage Against The Machine " />
<siteMapNode url="~/Products/84-sony-dcr-sr85-1mp-60gb-hard-drive-handycam-camcorder.aspx" title="Camcorder"
description="Sony DCR-SR85 1MP 60GB Hard Drive Handycam Camcorder " />
<siteMapNode url="~/Products/85-canon-digital-rebel-xsi-122-mp-digital-slr-camera.aspx" title="Digital Camera" description="Canon Digital Rebel XSi 12.2 MP Digital SLR Camera " />
</siteMapNode>
</siteMapNode>
</siteMap>
2) add the sitemap provider code in web.config that defines the new sitemap. In the example below, I added two sitemap providers into system.web If you only want one menu, you only need to add one new sitemap provider. My new sitemaps were named top and bottom.
<siteMap defaultProvider="NopAdminXmlSiteMapProvider" enabled="true">
<providers>
<add name="NopAdminXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider" siteMapFile="Administration/Admin.sitemap"/>
<add name="storeSitemapTopMenu" type="System.Web.XmlSiteMapProvider" siteMapFile="storeSitemapTopMenu.sitemap"/>
<add name="storeSitemapBottomMenu" type="System.Web.XmlSiteMapProvider" siteMapFile="storeSitemapBottomMenu.sitemap"/>
</providers>
</siteMap>
3) copy the css file nopCommerceStore/App_themes/administration/menu.css onto your clipboard, and then paste it into your current theme folder with the existing style sheets that style the store.
4) Rename the new stylesheet storeMenu.css
5) In the new storeMenu.css stylesheet, rename all of the css classes that are presntly named .AdminMenu to .StoreMenu and save.
6) next you have to decide if you want to just create a new div in the root.master file, and drop a sitemap provider and asp:menu controls into it, or if you want to create a new web user control file in in the nopCommerceStore/modules folder, and then create you div and menu controls there. I used the latter method, but just creating a div wherever you want it, and dropping the menu and sitemap provider controls into it should work just as well.
7) Regardless of how you decide to place your menu on the page, the last step is to define your sitemap provider and css stylesheet in the controls. Here's my example for the div and controls. remember once again that my menu at http://ethospoint.com/nopcommerce/ is actually two horizontal menus positioned one on top of the other. If you just want one, then you only need one set of controls, and one sitemap.
<div class= "divDynamicMenuTop">
<asp:SiteMapDataSource ID="storeSiteMapDataSource" runat="server"
ShowStartingNode="False" SiteMapProvider="storeSitemapTopMenu" />
<asp:Menu ID="storeDynamicMenu" runat="server" cssselectorclass="storeMenu"
DataSourceID="storeSiteMapDataSource" Orientation="Horizontal" >
</asp:Menu>
</div>
<div class="divDynamicMenuBottom">
<asp:SiteMapDataSource ID="storeSitemapDataSourceBottomMenu" runat="server"
SiteMapProvider="storeSitemapBottomMenu" ShowStartingNode="False" />
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
DataSourceID="storeSitemapDataSourceBottomMenu" cssselectorclass="storeMenu">
</asp:Menu>
</div>
...anyway, I'm taking all of this from memory but I'm pretty sure this is all of the steps to create an asp:menu control in nopCommerce. I'll also cross post this into the css and styling forum.
..........late note: and yes I did forget something, this method will render a menu that looks the same as the the one in the admin section, so you will also need some of the images from the nopCommerceStore/App_themes/administration/images folder. I restyled the entire new stylesheet for my menu with new images included so I didn't do this. If you want the same style of menu that is found in the admin section, you will have to determine which images are used there and copy them into your "theme"/images folder.