Building fancy navigations with Webpages and links

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
Post Reply
User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Building fancy navigations with Webpages and links

Post by mazhar » Wed Jan 05, 2011 10:07 am

Here is a control to build dynamic navigation using AbleCommerce webpages and links.

Installation:

In order to install the control you need to extract zip file and then move files under Website folder to your website in same directory structure. Now there is a styles folder which at the moment contains two versions of easynavigation.css. These both contain the style changes that I did to create two sample images attached in this thread. All you need is to to copy desired style sheet file and move it under your current theme folder. For example if you are running default out of the box ablecommerce theme then you need to place file under Website/App_Themes/AbleCommerce. Note that if you want to run multiple instances of EasyNavigation control with different styles for example to run control in sidebar and footer at same time. Then you need to provide one instance of control a different CssClass value and then update corresponding stylesheet for example if CssClass="footerMap" then in easynavigation.css file replace all locations of ul.easyNavigation with ul.footerMap.

Properties:

CategoryId- Id of category from which control will fetch webpages and links.
ShowTitle - Set to true if you want category name to appear as title heading.
ShowThumbnails Set to true if you want to show webpage and link item thumbnails along with their name.
ShowTitleThumbnail Set to true if you want to show category thumbnail along with title text
TitleHeading Use this property if you want to set a custom title instead of category name.
CssClass Allows you set a CSS class on control instance. This will be really handy where you will try to use multiple instance of easy navigation with custom styles.
TitleThumbnailUrl You can set title heading image URL using this property. if not provided it will default to thumbnail URL of category.

Sidebar Usage Example

Code: Select all

[[ConLib:Custom\EasyNavigation CategoryId="12" ShowTitleThumbnail="true"]]
[[ConLib:Custom\EasyNavigation CategoryId="13" ShowTitleThumbnail="true"]]
[[ConLib:Custom\EasyNavigation CategoryId="14" ShowTitleThumbnail="true"]]
[[ConLib:Custom\EasyNavigation CategoryId="15" ShowTitleThumbnail="true"]]
Finally see the images under Screen folder to get an idea how back end categories were setup.
Attachments
EasyNavigation.zip
(225.48 KiB) Downloaded 387 times
SidebarNavigation.jpg
(63.87 KiB) Downloaded 6446 times
footer-map.jpg
(70.5 KiB) Downloaded 6451 times

vhemlani
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 30
Joined: Wed May 25, 2011 7:58 pm

Re: Building fancy navigations with Webpages and links

Post by vhemlani » Wed May 25, 2011 8:10 pm

Hi,

I was having some issues with changing the CSS for the footer navigation item.

My firebug utility shows that the page currently has this for the element which I want to change.

Code: Select all

ul.easyNavigation li.easyNavigationItem {
color: #A1A1A1;
float: left;
clear: both;
margin-left: 23px;
padding: 2px;
}
All I need to really do is change the margin-left to 0px. I checked the easynavigation.css, and there was no such setting for margin-left to equal 23px. This is what I have in the easynavigation.css for this element:

Code: Select all

ul.easyNavigation li.easyNavigationItem{color:#A1A1A1;
float:left;
clear:both;
margin-left: 0px;
padding-left: 0px;}
Is something hardcoded somewhere that's preventing margin-left from being anything else besides 23px?
Any suggestions on how to change the margin-left?

vhemlani
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 30
Joined: Wed May 25, 2011 7:58 pm

Re: Building fancy navigations with Webpages and links

Post by vhemlani » Wed May 25, 2011 9:27 pm

I figured it out. I removed

Code: Select all

class="easyNavigationItem"
from EasyNavigation.ascx.

That way it just inherits the css from up above...

dustin

Re: Building fancy navigations with Webpages and links

Post by dustin » Tue Nov 29, 2011 1:55 am

It was indeed very interesting control. I am in the process of making some interesting project and I think this new fancy navigation can be of much use to me. I have not started working on it. Just preparing the other necessary stuffs to begin with. This is the first time I am working on such an impressive work independently. I don’t know how it is going to be. I am working hard to make it a complete success.

Post Reply