Final Preview

View Demo

The above image is a screenshot of what our Frog CMS blog will look like when we are done with this tutorial. Keep in mind we are using the default theme for the time being.

Step 1: Installing Frog

• As with most popular content management systems, Frog uses a MySQL database to store most of your data. You will need to create a database for your frog install. Be sure to take note of your username, password, and host as you will need this information for the install page.
• Once you have created your database, download and install Frog CMS somewhere on your server. For this article, our installation will be at http://dev-tips.com/frog_cms/, that is an actual demo page you are free to check out and browse if you wish.
• After you have uploaded Frog to your server, navigate to the directory you installed it in. Something like yoursite.com/ribbit/

You should be brought to the installation page, where you will fill in all of your database configuration details. See the screenshot below:

Fill in all of the necessary fields and submit the form. If all goes well you will be presented with a username and password. Be sure to carefully note this password and remember to change it once you login! See the screenshot below for the success page.

Now we need to follow the instructions at the bottom of the installation success paged pictured above. Make sure you take the following steps or Frog will disable the blog due to security issues (which is actually an awesome feature).

• Delete the install folder. The entire folder.
• Change the permissions (Chmod, you should be able to do this with your FTP editor, in Coda you can right click on the file and click ‘get info’) on the config file to read only. You will be removing all write permissions, leaving you with a permission number (well, octal) of 444. A screenshot is below to clarify any misunderstanding.
• Remove any files you don’t need such as the changelog.txt and install.txt etc.
• Navigate to the login page via the link given to you (pictured below).

Pictured above: removing write permissions from config.php

Pictured above: Frog login screen.

Go ahead and login, you are done with the install!

Step 2: Learning the basics

Once you have logged in, go ahead and take awhile to explore the backend of Frog CMS and try to get a feel for how everything works. I think you will be really impressed by the simplicity and flexibility of Frog right off the bat. I’ll go over a few terms here quickly to get you used to working with the backend of Frog.

• Pages: this is where all of your main content will be held, added, and edited. Individual articles are also held here. Don’t be confused by this, articles have their own children and are still separated from individual pages. If you want to create a new page, just click the plus Icon under ‘Home’. If you want to add a new article, simply press the plus icon by the article sub section.
• Articles:Like any blog, you can have articles and individual static pages. As discussed above, the articles are actually located under the pages in their own subset. To write an new blog post, just click the plus icon by the articles subset.
• Snippets: this is one of the features I think makes Frog really great and really simple. Think of snippets as a fancy php include. You created a new snippet, which can contain any kind of markup or language you wish. You can then access this snippet anywhere in your website template by calling $this->includeSnippet('snippet_name');. Later we will look at how to use snippets for our sidebar advertisements.
• Layouts: think of layouts as WordPress template pages. They define how the content appears and how it is marked up. Just as how you can create a new page template in WordPress, you can pick and create a page layout in Frog CMS. For example, if you had two different static pages, and you wanted completely different styles and layouts between them, you would just create a new layout for one of them and assign it to that page.
• Files: files is simply where you can find anything located in your public/ folder of the frog install. Things like themes and images.

That should cover the basics enough for us to move on, so lets do so…

Step 3: Add some content!

Go ahead and take some time to create some dummy articles and filler content. You can use a site like HTML-ipsum.com to get some filler content. If you were lazy and skipped the part above about creating articles, simply navigate to the backend, click pages, and click the green icon next to the articles subset. You can now publish as many articles as you like. Three or so should do for today.

Sidebar content is located under the ‘Home’ link found under pages. Click on the home link and you will see a tab that says ‘Sidebar’. Click on that tab and you will have a chance to edit or change any sidebar content you wish. Shortly, we will use a custom snippet in the sidebar to display some ads for us.

Step 4: Create some breadcrumbs!

A really nice feature to have on any blog or website is a breadcrumb navigation. This takes away any confusion the user might have and lets them know where exactly they are on your website. Luckily for us, we don’t have to add much code at all to get an automatic breadcrumb navigation on every page. We don’t even need a plugin!

• Navigate to the backend of Frog CMS admin panel, and click on ‘Snippets’.
• Here you will find at least two snippets, header and footer. Click on the header snippet to open it up for editing.
• Simply add the following code echo $this->breadcrumbs(); in between some php tags wherever you wish the breadcrumbs to show up. See below for two example screenshots.

Pictured above: adding our breadcrumb code to the ‘header’ snippet.

Pictured above: our breadcrumb code in action, working as expected.

You can also pass a separator argument to the breadcrumbs() method if you would like a different separator. And that is all it takes to get a working breadcrumb navigation on your Frog CMS install.

Step 5: Adding snippets for advertisements

As we touched on earlier, snippets are great for any short piece(s) of content that are going to be included throughout your website or blog. Say we want to have some ThemeForest and AudioJungle advertising on our website. First we can navigate to the ThemeForest make money page where we can download some 125 by 125 graphics to use for ads. Upload the graphics to your frog install under the public/images directory.

Now we can go ahead and create our snippet. Navigate to the snippets section of the admin panel and create a new snippet called sidebar_ads. Paste or type in the following markup:

<ul>
	<li><a href='#' title='AudioJungle'><img src='http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/125x125_AJ.jpg' alt='AudioJungle' /></a></li>
	 <li><a href='#' title='ThemeForest'><img src='http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/TF_125x125.jpg' alt='ThemeForest' /></a></li>
</ul>

Of course you can add any advertisement you wish, this is just for demo purposes. Now we are going to include our snippets where we want them to show up on our site. Obviously, these are going to go in our sidebar. Navigate to the ‘pages’ section of the admin panel. Click the ‘Home” link (or in my case ‘Fun with ze frog!’ link, as I changed the home links name). Once you have clicked on the Home link, click on the sidebar tab.

Now paste the following code and markup wherever you wish your ads to appear in the sidebar:

<h3>Sponsors</h3>
<div class='sidebar_ads'>
	<?php $this->includeSnippet('sidebar_ads'); ?>
</div>

You’ll notice that we have wrapped our snippet in a basic div class, this is to allow for some basic styling, such as removing the list-style-type on the advertisements. Add whatever CSS markup you would like and you have just included your ads on every page via your sidebar and snippets. The great thing about snippets is you can use as many as you like wherever you need them throughout your site.

Step 6: Create a sitemap page for easy navigation

On many websites and blogs, it is convenient to provide your users with an organized site map page so they can easily browse any information they are looking for. The Frog CMS makes it really easy for us to do this.

First, we need to create a new Snippet titled sitemap and paste the following code into the snippet:

<?php
function snippet_sitemap($parent)
{
	$out = '';
	$childs = $parent->children();
	if (count($childs) > 0)
	{
		$out = '<ul>';
		foreach ($childs as $child){
			$out .= '<li>'.$child->link().snippet_sitemap($child).'</li>';
			$out.= '</ul>';
			}
	 }
	return $out;
}
?>
<div id="sitemap">
<?php echo snippet_sitemap($this->find('/')); ?>
</div>
 
	</code>

Now simply create a new page under the ‘Home’ link by clicking the green icon on the right. Name the page whatever you wish and include the snippet we created above like so:

<?php $this->includeSnippet('sitemap'); ?>

Congrats, you have just created an organized and structured sitemap page in about 30 seconds. You should end up that looks something like the screenshot below:

If you do not want the actual sitemap page to be included on the sitemap, you can set the page to ‘hidden’ while you are publishing it.

Bonus: Removing the ? from the url

You may have noticed the question mark that is included on some parts of your URL in your frog install. Personally, it doesn’t bother me much, but if you wish to get rid of them, Frog has already thought of an easy solution. Follow the steps below:

1. Open up the _.htaccess file located in the root of your Frog install.
2. Change the RewriteBase to the location of your Frog CMS install (i.e /frog_cms/). Screenshots below.
3. Save and rename the file .htaccess
4. Open up the config.php file and change the USE_MOD_REWRITE value to true. Save and you’re done.

Pictured above: editing the _.htaccess file to our install path.

Pictured above: editing the config.php file.

For more information about removing the ? mark, or if you have any trouble, see the user guide on this topic.

Our Final Product

With those basic steps in place, we were able to create a very basic blog in no time at all. You can check out the final demo of this tutorial here.

Want More?

I have to say, in preparing for this tutorial I was quite impressed by the Frog CMS system. What do you all think? Would you like to see more Frog tutorials in the future, perhaps on the topics of themes? What are your impressions of the From CMS in general? Please let us know in the comments section!

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Licenses

• GPL: All PHP code containing WordPress functionality will be sold with a GPL license. With this license, buyers will be free to modify and/or redistribute the files as they wish.
• Standard License: Don’t worry, authors. To protect your templates, all CSS, JavaScripts, and images will still be bound by our standard license.

Layman’s Terms, Please.

Properly selling WordPress themes can be a bit tricky. According to WordPress policy, all PHP files (with WP code) must be distributed with a GPL license. As you can imagine, this puts us, and our authors, at a disadvantage. How can you profit from your themes if any buyer is within his rights to redistribute your theme as he sees fit?

Luckily, our authors shouldn’t worry. Only the PHP will come with the GPL license. Your images, stylesheets, and JavaScripts will still hold our standard license - which forbids buyers from redistribution.

Why Make This Change?

For two reasons:

• 1: Technically, we have to.
• 2: It’s important to respect the spirit of WordPress. This is the way it was intended.

Do I Need To Do Anything?

Yes and no. We’ll take care of updating all zip files to include a GPL text file. Beginning August 4th, all authors will need to include the GPL text file with their theme, when submitting. More information will be provided closer to this date.

No Thanks, I Won’t Participate

We understand; however, I highly urge you to reconsider. Because your images and CSS are 100% protected, you don’t need to worry too much. Having said that, if you do choose to remove your item(s), you have until August 4th, 2009 to do so.

You’ll find that most marketplaces on the web are adhering (or are in the process of transitioning) to the GPL.

Additional Information About the General Public License

Where Can I Read More?

Refer here.

Why does the GPL permit users to publish their modified versions?

A crucial aspect of free software is that users are free to cooperate. It is absolutely essential to permit users who wish to help each other to share their bug fixes and improvements with other users.

Some have proposed alternatives to the GPL that require modified versions to go through the original author. As long as the original author keeps up with the need for maintenance, this may work well in practice, but if the author stops (more or less) to do something else or does not attend to all the users’ needs, this scheme falls down. Aside from the practical problems, this scheme does not allow users to help each other.

Sometimes control over modified versions is proposed as a means of preventing confusion between various versions made by users. In our experience, this confusion is not a major problem. Many versions of Emacs have been made outside the GNU Project, but users can tell them apart. The GPL requires the maker of a version to place his or her name on it, to distinguish it from other versions and to protect the reputations of other maintainers.
-gnu.org

Additional Questions

If you have any additional questions, leave a comment and we’ll get back to you as soon as possible.

Day 16

Resources you may enjoy:

• Wp Codex: Using Custom Fields
• 20 tutorials and resources for working with custom fields

• Subscribe to the Theme Forest RSS Feed and follow us on Twitter.

Finalist 5: The Final Frontier

by circuitbomb

“Space. It is colorful. It is infinite. These are the voyages of the starship Envato. It’s continuing mission…”

Congratulations Circuitbomb, you’ve won US$3,500 to spend on your ultimate creative set-up!

Each of the 10 finalists have won the contents of their collection. Thanks to everyone who entered, and watch out for the next big Envato competition!

Fresh and catchy content

If you have good content, people will always come back for more. One of the most important things about content is to keep it fresh and up-to-date. But, just like Smashing Magazine, make sure you archive your content for people to refer back to.

Listen to your community

If you are already lucky enough to have a community or even just some regular users, listen to them. You can do this by emailing your users directly, setting up comment forms, live chat, or even user feedback systems such as UserVoice, which allow users to vote on site issues and functionality. By listening to your community you can determine exactly what they want.

Monitor how your site is used

Knowing how users use your site is vital. This allows you to target their needs better. The best way is to keep a close eye on your analytics data, check what country/area your users are coming from, what search terms are working well for you, and what sites are giving you the best referrals.

Find out how users navigate your site via Heat maps. These help you alter your site so that it is easier for your visitors to use and find what they want. This keeps your users happy and more likely to return.

Take part in the on-line community

When you read your favorite blog or read an article of interest, leave a comment with your name, email and web site address. Ensure you are an active member of a relevant forum discussion or networking group. Make sure you are seen to be an active member of your site’s online community sector.

Smashing Magazines commenting system making it easy to take part.

Submit to directories and galleries

This should be an ongoing process as there are many local, national and worldwide directories. Your first port of call should be DMOZ.org. Following this submit to the local directories and those specializing in your sites business sector.

If you are designing web sites and proud of your work, submit your site to web design galleries. These directories such as CSS Beauty and CSS Elite feature beautiful and creative designs and ask users to comment and rate each design. Once people see your work their visitors may become yours too.

Email signatures

Whenever you send out an email, make sure you have your URL attached to the email signature. Simple idea but effective.

Business cards always at hand

Ensure you always have your business card to hand. If you meet someone needing your services it always pays to have a striking and memorable business card to exchange. It is worth spending time on your business card to make it creative and memorable, otherwise you may just be left at the bottom of the pile with the rest.

Company stationary

Put your web site address on everything; pens, letterheads, flyers, and anything that represents your company. Make sure it is clear and promotes people to visit your web site e.g. “For more information on our new product check ourwebsite.com”

Win an award

Winning an award is not easy but it can lead to a flood of visitors to your site. Even if you are a runner up, people will be curious as to who you are. The winner of the .net magazine interactive site of the year 2009, www.ecodazoo.com, received huge amounts of visits from the www.thenetawards.com site. Choose your competition wisely and remember, winning is not everything but getting your URL in front of as many readers as possible is.

Ecodazoo pushes the boundaries of 3D design on the web.

Competitions

On the flip side of winning an award, running a competition can be just as beneficial to your analytics stats. This could be as simple as designing a new logo or coming up with a new name for your latest product. Either way this will attract more users to your site and show you are giving back to your users as well as taking.

The Webby Awards is the leading international award honoring excellence on the Internet.

Search Engine Optimisation

Effective SEO, common sense and web standards go hand-in-hand. The idea is to create a semantic, valid code, that essentially uses the right tool for the job. This means using the right HTML tags and having a unique title and meta data for each page. Ensure search engine spiders can correctly index your site and good content is a must. Remember the most important way to climb the search engine ranks is through quality links. For full information on this see the Google Webmasters/Site owners guidelines.

Search Engine Optimization Starter Guide

Paid advertising

Pay per click advertising can drive a great deal of traffic to your site if you correctly target your keywords. Placing your banner or link on relevant sites will vastly improve the chance of you getting noticed.

The most effective advertising gets your message to a relevant audience.

Write articles

Writing articles for other sites as well as your own is a fantastic way to get noticed. SEO experts will tell you the same thing and one of the biggest sites for articles is www.ezinearticles.com. If you are a web designer, consider writing a tutorial for SmashingMagazine or NetTuts. If your sell power tools consider writing an aritlce about the best router for making coffee tables etc. Just make sure you put your URL next to your name and if it is well written people will want to know more about you.

Create a Blog

As you know blogs are big and they are continuing to thrive as people want quick useful information about a product, service or general news. Wordpress has been at the forefront of blogging and gives us the tools to make search engine friendly rich blogs with beautiful design. It is up to you to fill your blog with fresh and catchy content.

Building a WordPress Blog People Want to Read (Paperback)

Online community web sites

In the past year we have seen the social community web site boom and many sites have reaped huge benefits. Creating your own Facebook page, uploading your work to Deviant Art or creating your own Squidoo page all help build your online presence.

Twitter and Twibes

We all know the power of Twitter by now and much has been said on the subject of using Twitter as a marketing tool, but the fact remains it is a very effective way of getting noticed. Get the most out of twitter by choosing one of the many tools available. Keep inside your niche area, follow people that matter to your web site, make it personal. Do not just use marketing spiel or you will quickly lose followers. If you are part of a niche area consider setting your own Twibe i.e a group of Twitter users.

Pod and Video Casts

If you have something to say and you think others will be interested then consider making a Pod Cast or Video Cast. www.Boagworld.com is a leader in this field for web design and Paul Boag has said that the majority of his new clients have come through the Podcast. Here are eight tips when thinking about Podcasting:

• Invest in a good microphone
• Reduce background noise
• Prepare but do not read as if from a script
• Follow a consistent format
• Invite guest speakers
• Have regular scheduled casts
• Enjoy the process and relax

Video Blog of David and Marc Perel discussing their passion for Web

Newsletters and RSS feeds

Users sign up for your newsletter and you have your captive audience. If used properly newsletters can be very effective tools for driving people to your site. Check out Smashing Magazines best practices article before embarking on your campaign and when you are ready use services like MailChimp to monitor its success.

Similar to newsletters, having an RSS / subscription feed of your content is another way to keep users noticing your web site. They are easy to setup and a good way to keep your users up-to-date on your web site. Make sure you keep your feeds relevant, interesting, informative and easy to find.

Ref: http://www.hongkiat.com/blog/really-cool-rss-feed-icons/

Seasonal cards and e-cards

Send out cards to your clients either by snail male or to their email. Not only is this a nice gesture but also keeps your web site address firmly imprinted in their mind. Using services like Cards Direct is a quick and easy way to spread the holiday cheer with your web site address attached to it.

Run an event

Running an event is both a fantastic way to market your business and to connect with your customers, clients and experts in your sector. For example, the Future of Web Design events are run all around the world featuring many professionals from the web design community. Your event does not have to be around web design, but focused on your site and business’s sector to raise awareness of you and your site.

Alternatively you can be one of the speakers. This form of marketing has worked very well for people like Brett Welch, Danny Somekh and Folkert Gorter who spoke at the FOWD London 2009.

T-shirts with your web site address

Be your own marketing tool, have T-shirts, bags, folders etc sporting your web site address clearly.

Joomla raises peoples awareness with its online shop.

Create a phone app

Can your service be provided or product purchased using mobile phone or PDA? If so consider creating your own phone application. If you want to tap into the vast iPhone market you can consider selling your app on iPhone app store. Alternatively you can use a company like Siruna to create the mobile application for you.

Charity Work

You can donate directly to a charity or run a charity event. There are many charities out there, so choose wisely and carefully.

College and University Project Sponsorship

Many courses require a student to do a set amount of work experience or final year project. Contact your local college and or university and offer them a project that you would like their students to help on. "My final year project was to create a new search engine optimised template for a local business directory. The directory benefited from the new template tremendously and we learnt a great deal as a team."

Submitting proposals for college and university projects not only supports your web site but helps students gain real life experience in their chosen field. Here are a few examples:

Business Services at the University of Salford UK
Center for Bioengineering Innovation & Design
Monash University Australia

Place your content elsewhere

Your web site is not the only place to put your content. If you sell a product you can also list it on eBay. If you are a band why not put your songs on Last.fm, If your site is about tutorials you can also submit your tutorial to other sites like netTuts. Once people notice your content they will be more inclined to visit your site hungry for more.

Give away free stuff

In the case of Vista print they offer free business cards, the cards have your logo and details on one side and theirs on the other. Here is a list of ideas you can give away:

• Pens, badges and other stationary
• Free e-books or even audio books
• Screensavers
• Desktop backgrounds

Amazon Vouchers

Sponsorship

Sponsorship can be a remarkable way of getting your web site in front of 100’s or 1000’s of eyes. When choosing a sponsorship project, keep to ones that will reflect well on your company as well as being relevant. For more information check out the following sites in the UK and North America. You can also place advertisements that you or your company is looking for proposals from individuals or companies to sponsor. When you receive the proposals have a set criteria in mind of what your looking for.

The DataPowertools.co.uk 5 aside football team.

Get in the news

The news takes many forms in today’s media but one of the most beneficial is to get your site featured on a popular news web site. One of the top five news portals is Google News. There are two ways; to be a feature or to feature news items. Either way you should concentrate on having original content, multiple authors, proper attribution and good response time. For more information check out the Website Magazine article Get Your Website Included in Google News.

Press releases

Do you have web site that people are interested in on a national or local level? Why not submit a press release informing the public about your new site. Simply place an add in the local paper or sector specific magazine.

Merchandising

Do you have a product that you think will sell? Why not try your hand at merchandising, but if you are new to all this you can use services like 50below.com to help setup your online store. If you do have a number of products list them on various other platforms like eBay, Froogle and Amazon with links back to your site within the product descriptions.

Solve a problem

Find a problem that affects your sites sector, create a fix and publish it. A good solution to a difficult problem is a sure fire way of getting people to flock to your site. One example is the PNG fix for Internet Explorer, this simple site received thousands of hits as it helped solve a problem with image transparencies in IE6.

http://labs.unitinteractive.com/unitpngfix.php

Adding widgets to your web site

Give your site a boost by adding news feeds, blogs, tweets, various widgets, delicious links, diggs and stumble links to your site. For the most comprehensive list of widgets try the netvibes ecosystem. When adding widgets to your web site keep in mind that they should enhance the user experience and not clutter your web site. Less is more!

Widgetbox gives you more than enough choice of widgets

YouTube channels / subscriptions

We all know that YouTube is massive and already one of the biggest way sites get noticed is through uploading or creating
creative,
fun,
shocking,
interesting
or damn right weird video.
Setting up your own channel will allow users to subscribe to you thus giving you more eyes on your content and web site
url. Making a short introduction, or a series of clips like
Expert village is a cost effective way of driving traffic to your site as well as climbing the search engine results ladder.

Free services

Having a specific free service that is useful and intuitive could attract a plethora of users. Here are some examples of sites with useful tools:

Freelancer rates calculator
Kuler colour scheme creator
Multiple browser tests
XML site map generator
Calculate your salary
Customized currency converter
Web Page Analyzer
FavIcon Generator
Instant Domain Search

Freelance Switch’s rate calculator helps people
work out their standard freelance rate.

Consultation service

If your site is a specialist in its field consider offering a consultation service. A consultation service can be done via the internet, phone or in person. You can provide this service to individuals, groups or businesses and with the power of Skype and a web cam it can be like you are standing next to them. You could even offer alternative consultation services like usability testing such as UX Roast or User Testing.

What tools are the professional online consultants using? Many online consultants use Skype because it is cheap, effective and well supported. When using any peer-to-peer communications service, make sure you set-up a separate account for your consultation service so you keep your private messaging private. Skype offers a Skype Prime account where you can register as a trainer and people can contact you for one-to-one or group learning.

Affiliate schemes

As a business, you offer rewards to Affiliate Marketers for every visit or consumer brought to the site using affiliate marketing techniques. This method allows you to attract more customers to your site by letting someone else do the hard work. You can offer different types of schemes such as co-branding, white labeling, loyalty schemes and many more.

There are hundreds of thousands of schemes available, so make yours attractive to marketers by offering high rewards for sales.

The Affiliate Programs forum contains information about 100’s of schemes and, most importantly, user feedback from people using them.

Vouchers and special offers

If you have a marketing budget, spend some time attracting users with goodies. Maybe you could offer 10% off their next subscription or a free trial to your service for 30 days. Vouchers can also attract users as you can post your voucher on of the many voucher sites.

Make your special offer loud and proud so people notice.

Become a re-seller

A re-selling service is where you sell an existing product or service such as hosting and domain names. Re-selling is a way to gain passive income by offering a quality product or service you would not be able to develop alone. This ability to give a better service will attract customers and if you ensure good customer service you might benefit from word of mouth recommendations.

Hostgator’s reseller packages offer a lot of choice.

Have a great idea

The internet has been a veritable breeding ground for creative people and ideas. This creativity has given birth to some amazing ideas that make people flock to the site. If you think you have a great idea, harness it. Turn your idea into reality, like Google’s originators Larry and Sergey, wanting to create a fast and simple search environment with Backrub in 1995 to a student selling pixels to put himself through University in 2004.

"The main motivation for doing this is to pay for my degree studies."

Create a plug-in, template or widget

A widget or plug-in is a design to enhance the platform. It is designed to entertain or make life easier for users. Keep this in mind when developing your application such as a plugin for Wordpress or a template for Joomla. Make sure people know who made it and where they can find the web site.

Theme Forest helps designers sell their work.

Write tutorials

If you are an expert in your field and you know what your talking about, choose a subject and write a tutorial on it. You can then make the tutorials available on your own site, to capture your audience, or submit your tutorial to sites such as Nettuts.

Write a book

Writing a book is time consuming and a labour of love but it can reap so many benefits as a product in its own right. It will raise awareness for its topic and author. Books like Elliot Jay Stock’s Sexy Web design, Steve Krug’s Don`t Make me Think or even an audio book like Chris Anderson’s The Long Tail have brought brand awarness and thus visitors to each of the authors respective websites.

Start a magazine or online publication

Blogging is a simplified version of creating an online magazine. Your online magazine should be much more by concentrating on different types of content, building a community of readers and exploiting various revenue streams.

When creating an online magazine make sure you know your CMS inside out. It will be the foundations of your business and web site and should allow you to make publishing the content painless. Think about how you will make the money to help you grow your site. Newsletters, RSS and forums will help you keep your readers up-to-date and talking.

If you need help with content you can look at purchasing content or invite other authors to help you get started.

Subscription service

Subscription services can help you gain a constant stream of visitors to your site as they download the latest news, music or tutorials.

If you are planning on charging for subscription use an integrated payment system like Spreedly to take the pain away of setting up payment gateways and storing Credit Card details.

Attend networking events

Networking events can be both fun and a very effective way to promote your web site. Armed with your business cards and an approachable smile you are sure to meet someone interested in your services, or who knows someone else who will.

The key is in choosing the right event for you and being prepared. Networking events are normally around certain types of business or target professionals in specific areas so choose what is best for you. Check online event sites like Facebook or Meet-up, or the local paper. If you can`t find one in your area, run your own!

Product updates

Offering regular updates to your product you can attract a consistent stream of users wanting to benefit from the new update. You should notify your users when a new update is available and this can be done via the software itself or via your web site. Consider making your updates a regular attraction for users to come back to your site and make them easy to download and install.

FireFox makes it simple to update by making it part of the software.
The user does not have to go away, download and install the update, but simply click ok

Label your work

Be proud of your work and put your logo and web site address on it. For web designers, put in your contract that the finished site must feature a back-link to your site. This may not always be possible but anyone enjoying the site you built will be intrigued to see the company who built it. For photographers, put a water mark on all your site samples and producers have your web site address on your packaging. No matter what sector you are in, there is always room for a label on your work.

Links to a sites design company can normally be found on the footer.

White label sites

A lot of sites, especially in the hotel and leisure industry, use what is called a White Lable site. This enables a successful brand to offer a service without having to build the functionality and databases itself. You can go about this two ways:

Use a white label service such as white label dating, social networking, holiday and leisure to create a site. For more information on white labling check out this article.
Allow users to use your functionality and database to create their own white label site. Lastminute.com , has created a very successful net of sites that utilise their data and functionality

Sites using Lastminute’s database / functionality can be seen on.

Konami Code

A new sensation on the web is the addition of hidden code that when users press a sequence of keys they get a hidden surprise (easter egg code). Site point and many other sites have done articles on this blast from the past way of entertaining your users. For more information goto http://konamicodesites.com/ but you will need the code to access it: up, up, down , down, left, right, left, right, b, a. Enjoy!

You`ll need quick reactions to score on this Konami game!

Best until last; social bookmarking

The last tip is also one of the best and easiest. Stemming from the simple idea of having a "Tell a friend" form on your web site, allow users to bookmark your site on the many social book mark sites, that way you are letting other popular sites do the hard work for you. Social bookmarking meta services like addtoany area a simple way for users to publish your site to their accounts on Facebook, Delicious, Stumble and many more with one click. Copy and paste their code on to your pages and your away.

That wraps it up for this article, I hope you have enjoyed the read. Some of the ideas are a little wacky but they will all help you get your site noticed.

I look forward to reading your feedback!

Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Starting today, each marketplace in the Envato network will be offering one free template for the entire month. No catch — just free! This month’s offering comes courtesy of “YA Design”.

Author : YA

File : Nice and Clean

This site template is the complete package: five page theme, portfolio slider, AJAX contact form, etc. From now until July 31, it’s 100% free!

Features:

• Featured Portfolio Slider on the homepage.
• AJAX contact form with validation.
• Valid Xhtml 1.0 Strict
• Works in IE6+, Safari, Mozilla, Opera
• Clean code

Download Here

Usage:

You are granted ONE free usage of the item in a project either commercial or non-commercial. You may not use the file in multiple projects unless you purchase licenses in the usual way. You may not redistribute the item in any way. If you need a different license for this file, you may purchase it here (link).

More From YA Design

A huge thank you goes out to “YA Web Design” for generously offering this template to the community. Be sure to follow them on Twitter!

I wonder what the other marketplaces are giving away for free this month??

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Here are 20 excellent Coda tips to increase productivity that I’ve gathered during my use of Coda so far.

1. Set Your Preferences

There are a few things I had to change right away when I first started using Coda. These are all found in Coda’s preferences.

I never use a GUI CSS editor so I set Coda to always open CSS files with the text editor.

Under the Editor tab I’ve check-marked “Show line numbers” and “Use tabs” for indenting. You can hide/show line numbers by pushing Command + Option + L as well.

Under the Colors tab I’ve check-marked “Highlight Current line” to make it easier to see where the cursor is when switching back and fourth between applications.

Under the files tab I set files to open when double clicked instead of a single click. You may also need to setup your external editors. Coda automatically used Photoshop for the image formats I use.

This is how Coda’s navigation bar at the top is by default. This is just a waste of space in my opinion although it is pretty.

I’ve changed mine to display only text titles and as small as possible. Since I don’t use the buttons I have that section minimized most of the time anyway. Instead I use the shortcut keys which I’ll cover next.

Aside from these changes, I’ve left everything else at the default settings. I’ve played around with the color schemes a little but I didn’t find anything I was really happy with so I’ve kept the default color scheme.

2. Switching Modes

If you aren’t using shortcut keys to change modes, now is a good time to learn. Pushing Command + 1-6 changes the mode you’re in. You can switch between your sites, editor, preview, etc. modes very quickly this way.

3. Navigating Open Documents

Pushing Command + Shift + Left or Right Bracket will navigate through your open documents.

4. Line Indenting

Coda automatically indents certain markup for you by default but you’ll still find yourself using the Tab button pretty frequently. Instead of jumping to the front of a line to indent it you can push Command + Left or Right Bracket to indent the line the cursor is currently in.

5. Clips and Text Inserts

Pushing Command + Control + C will open up Coda’s clips. Clips is a place to store snippets of code for quickly inserting into documents. You can save snippets for use in all documents or just site specific clips.

You can assign tags to quickly insert clips. For example, I’ve set “htmltemp” to insert an HTML 4.01 Template when I start a new document. I would type “htmltemp” into the blank document and push Tab to insert the clip. You can also insert a selection placeholder if the cursor needs to go somewhere specific in the clip after being inserted.

6. Inline HTML Validation

Validate your HTML while you’re working. Ok, if you’re experienced with HTML you might only want to use the validation feature when you’re ready to validate, otherwise you’ll have errors popup as you’re typing which can be pretty annoying.

Coda will tell you what needs to be fixed. Sometimes there is a little orange “snapback” button in the ballon that will take you to the beginning of the error when clicked.

7. Use Coda’s Hints

If you aren’t quite comfortable with HTML or CSS yet you can use Coda’s Hints feature to give you a little extra guidance.

8. Use Coda Books

Highlighting something and pushing Command + ‘ will search the books you have available in Coda for the highlighted text. You can also just hold Command and double click a word you want to search for.

9. Setup More Coda Books

Add more books to reference more information. You can read more about adding more Coda books here.

10. Block Edit Text

If you need to edit multiple lines you can do a block edit to do them all at once. You can highlight the text you want to edit and push Command + Shift + B or you can hold down Option and select the lines you want to block edit that way.

11. Shift Text

Highlighting text and pushing Command + Left or Right Bracket will shift the highlighted text left or right. This is great for shifting a whole section of markup for good looking markup formatting.

12. Preview in a Browser

You can preview files in Coda’s built in Preview mode (which uses the same engine as Safari) and while in that mode you can click the Preview in Browser button in the top right to open the file in the browser of your choice.

You can also push Command + Option + B while in any mode to open and preview the file in the default browser (Safari). When you make changes to the document you can use this shortcut to refresh the preview in the browser a little faster.

13. Use the Preview Tools

There are three tools included with Coda’s preview mode. These can be helpful for quick development issues (although I still find myself using Firebug ).

The left button lets you preview the source code. Kind of strange since you’re just in the preview mode and you could just switch back to the edit mode. However, this lets you edit the source code and preview the changes without actually editing the document. A great feature for testing and debugging.

The center button is the javascript log and the right button is the DOM hierarchy inspector. You can quickly find and see elements with this which is helpful if you aren’t sure what’s going on.

14. Split Windows

You can split windows using the icon in the top right of the window (the plus with lines). Pushing Option will change the direction of the lines meaning the split will change from horizontal to vertical (or the opposite if changed in preferences). You can also push Command + Control + L to split the window using shortcut keys (hold option to split the other direction).

Within each window you can independently change modes.

15. Open Separate Files in Split Window

You can also open separate files in split windows by right clicking files in the File Browser and selecting “Open in Split” or by dragging the file into an already open split. Now you can edit two separate files in a split window.

16. Hide/Show File Browser

Coda’s file browser is great but you won’t be using it the majority of the time so you can quickly hide/show it by pushing Command + Control + B.

17. Hide/Show Code Navigator

If you need a little help jumping around a document you can pop open the code navigator.

A little hidden feature with Coda and the code navigator is that you can create “bookmarks” within your code to jump around your document faster using the code navigator. For example.

This would create a bookmark in the code navigator that looks like this.

Basically the bookmark is created with markup comments that use an exclamation point before the bookmark text. You can do this for HTML, CSS, PHP, etc.

18. Use the Find Features

Instead of using the code navigator to find things, I use the find features. Pushing Command + F opens the bar to search. Then just type in what you’re looking for and push enter. Coda will scroll the document to the first matching text and highlight it. There are several more shortcut keys for searching and several options you can change if needed. Using the find feature is much faster for me than using the code navigator since my hands never have to leave the keyboard.

19. Quick Close Tag Shortcut

By default Coda will automatically close a tag once you’ve opened one. However, that doesn’t always work and I still find myself needing to close HTML tags manually all the time. Pushing Command + Option + . (period) will automatically close the current HTML tag (wherever the cursor is).

20. Get Plugins

While Coda has a lot of great features, there are many features developers still want. There are a few plugins available from third party developers that you can install to give Coda extra functionality. Here is a list of third-party plugins available.

Final Thoughts

These are some great tips for using Coda but like any great web development application, there are plenty more, so take some time to explore. With some practice, you can pick up tons of keyboard shortcuts that will keep your hands on the keyboard instead of wasting time mousing around.

For video tutorials, tips, guides and other information, visit Panic’s Coda Developer Zone.

If you have some great tips, feel free to share them with us by leaving a comment below.

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

How’s It Work?

Go to your account page and visit the “hidden” tab.

If you see the words “Soft Disabled” in brackets, you can update the item and resubmit.

To edit and resubmit a soft-disabled file, click on the file in question, then go to the “edit” tab. You can then upload the requested changes.

Once you’ve made the necessary changes, click on the “submit files for review” button at the bottom of the page.

That’s all there is to it! If you have any questions, leave a comment.

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

Download Source

Our Goal

For this tutorial our goal is to create a widget that will pull records from a database at set intervals and display them on our page. We will be using PHP and MySQL to extract and display our data, and jQuery to animate the refresh transition.

Step 1 Database Creation

Open up PHPMyAdmin and create a new database called ‘sampledb’. Within this database we need to add a table called ‘products’. Of course in your own projects you might not be listing products, but for the purposes of this tutorial we will be using the widget to list products from our database.

We want to add the following fields:

• id - INT - Primary Key - Auto Increment
• product_title - VARCHAR(150)
• product_price DECIMAN (6, 2)
• product_img - VARCHAR(150)

We need to populate the database with random data. I already have 10 images that I’ll be using in the product_img field, and I already know they are all 125px by 125px so I also know I won’t have to force the image sizes later on. For now, lets create ten random products and give them all an image of their own.

You can put in any random data you wish, I used the following in my database:

INSERT INTO `sampledb`.`products` (
`id` ,
`product_title` ,
`product_price` ,
`product_img`
)
VALUES  (
NULL , 'Some Awesome Band', '6.99', 'product_images/001.jpg'
), (
NULL , 'Greatest Hits', '8.99', 'product_images/002.jpg'
), ( 
NULL , 'Brilliant Band', '11.99', 'product_images/003.jpg' 
), ( 
NULL , 'Super Duper', '9.99', 'product_images/004.jpg' 
), (
NULL , 'Random Band', '8.99', 'product_images/005.jpg'
), (
NULL , 'Guitar Heroes', '7.99', 'product_images/006.jpg'
), (
NULL , 'Some Randomers', '4.99', 'product_images/007.jpg'
), (
NULL , 'Could Be Anyone', '8.99', 'product_images/008.jpg'
), (
NULL , 'Super Band ', '5.99', 'product_images/009.jpg'
), (
NULL , 'The Amazing Greats', '12.99', 'product_images/010.jpg'
);

The above inserts 10 records, all using one of my product images that I sourced earlier. The important thing here is the link to the product image is valid, as these will show up in our widget.

Step 2 Creating a Simple Layout

For our widget to show up, we need to create a container for it to load into.

Create a file called ‘index.php’ and in between the body tags insert the following code:

<h2>Our Awesome Products</h2>
 
<div id="widget">
 
    <div id="widgetbox"><!--This is where our products will be loaded into -->
 
    </div><!--End WidgetBOX -->
 
</div><!-- End Widget Container -->

We now need to create a new file called ‘styles.css’ and save this in a new folder called ‘css’.

Back in your ‘index.php’ file we now need to link to this file, so in between you head tags add the following:

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

Save everything and now open your styles.css file and we can begin to work on the styling for our widget. The final CSS is listed below but it’s important to point out the key elements which are the #widget and the #widgetbox as these are the main container elements. We won’t go through every single CSS styling because you’ll want to create your own, so here is the final CSS file

@charset "utf-8";
/* Master Styles for Product Listing Widget */
 
body {
	background-color: #1F1F1F; 
	color: #FFFFFF; 
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 25px;
	margin-top: 25px;
}
 
 
/*	This is the main container for our widget	*/
#widgetbox {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 10px;
	height: 100%; /*	Clears our floats	*/
}
 
#widget {
	width: 620px;	/*	Sets the master width of our widget	*/
	height: 200px;
	background-color: #333333;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	border: 1px solid #999999;
}
 
 
#widget ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
 
#widget li {
	display: block;
	float: left;
	width: 138px;
	text-align: center;
	margin: 0px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
 
/*	Gives our widget items a nice roll-over effect	*/
#widget li:hover {
	background-color: #666666;
	cursor:pointer;
}
 
/*	Basic styling for the elements within our widget	*/
#products h4 {
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	color: #FFFFFF;
	font-size: 11px;
}
#products img {
	border: 1px solid #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#products p {
	font-size: 11px;
	margin: 0px;
	padding: 5px;
	color: #999999;
	font-weight: bold;
}

If we preview this in the browser you won’t see anything other than a heading we put in earlier. This is because we haven’t loaded any content in. To load the content, we need to create some PHP files that will first make a connection to the database, and then extract what we want to display.

Step 3 Connecting to the Database

In order to display any products, we need a connection to the database. It’s generally good practice to create a separate ‘database.php’ file and require it for the pages that need it, so our first job is to create this file.

We need to connect to the database we created earlier, and so what this file is doing is picking out that database. You might need to change the username/passwords to mirror what your own set up is. It is very important to have a password if you are planning on making this site live on the Internet.

<?php
 
$db_name = "sampledb";		// The database we created earlier in phpMyAdmin.
$db_server = "localhost";	// Change if you have this hosted.
$db_user = 'root';			// Your USERNAME	
$db_pass = ''; 				// Your PASSWORD. Working locally, mine is blank. Change if you plan on deploying.
 
$mysqli = new MySQLi($db_server, $db_user, $db_pass, $db_name) or die(mysqli_error());
 
?>

We’re assigning all our database credentials to variables, which I’ve commened on.

We’re also creating a variable called "$mysqli" and are setting it to a new instance of the "MySQLi" object. We need to pass in four parameters - these are what we’ve assigned above it.:

• database name
• the server
• username
• password

That’s it for the ‘database.php’ file, we can go ahead and close this after saving it of course.

Step 4 Pulling Out Our Products

Our first job is to create a ‘getProducts.php’ file. This will be the file where we extract the products from the database using a query, and then we will be generating the HTML that will then be loaded into the widgetbox we created earlier.

First of all, we need to require the ‘database.php’ file we created earlier. We do this with the following code:

require 'database.php'; // Allows us to connect to the database.

Our second job is to create a query. Now since we actually need everything we could use the SELECT * from PRODUCTS statement, however some feel that is a lazy way to code and open to attack, therefore I will be picking out all the fields manually.

Our query will look like this:

SELECT id,  product_title, product_price, product_img FROM Products ORDER BY Rand() LIMIT 4

This will pull out the product title, it’s price, it’s image location and limit the results to 4 at random using the Rand() function. This is the meat of this whole tutorial, so if you are planning on using this yourself you will want to make some changes to this query - for example you may wish to select only records where a ‘FEATURED’ field is equal to true.

Here is what our query looks like, alongside the lines that actually execute the query.

//store our query in a variable named $query
$query = "SELECT id, product_title, product_price, product_img FROM Products ORDER BY Rand() LIMIT 4";
 
// run the query and store the results in the $result variable.
$result = $mysqli->query($query) or die(mysqli_error($mysqli));

To recap, we’ve connected to the database by requiring the ‘database.php’ file, we’ve created a MySQL query and then executed it. Now, we need to loop through the results and output the field contents into the elements we want loaded into our widget.

 
if ($result) {
 
  echo "<ul id='products'>"; //Open up an unordered list.
 
  while ($row = $result->fetch_object()) {
 
    $title = $row->product_title;
    $price = $row->product_price;
	$image = $row->product_img;
    $id = $row->id;
 
	// for each product, output a new list-item and then the products image, title and price
	echo "<li><img src='$image' alt='$title' />"; 
    echo "<h4>$title</h4>" ;
    echo "<p>&pound;$price</p></li> \n";	
 
    }
 
	// when the loop is complete, close off the list.
	echo "</ul> \n";
}

I have commented the code so it should be quite easily understood, but essentially what we are doing is

1. For each row, pull out the title, price, image and id
2. Store these in a variable
3. Output as a list-item
4. Loop through until there are no more records:
5. Closing the loop, and the unordered list.

That is is it for our ‘getProducts’ file, we can save and close this and now move onto loading this into our widget. The entire code for the ‘getProducts.php’ file should look like this:

<?php
 
require 'database.php'; // Allows us to connect to the database.
 
//store our query in a variable named $query
$query = "SELECT id, product_title, product_price, product_img FROM Products ORDER BY Rand() LIMIT 4";
 
// run the query and store the results in the $result variable.
$result = $mysqli->query($query) or die(mysqli_error($mysqli));
 
if ($result) {
 
  echo "<ul id='products'>"; //Open up an unordered list.
 
  while ($row = $result->fetch_object()) {
 
    $title = $row->product_title;
    $price = $row->product_price;
	$image = $row->product_img;
    $id = $row->id;
 
	// for each product, output a new list-item and then the products image, title and price
	echo "<li><img src='$image' alt='$title' />"; 
    echo "<h4>$title</h4>" ;
    echo "<p>&pound;$price</p></li> \n";	
 
    }
 
	// when the look is complete, close off the list.
	echo "</ul> \n";
}
?>

Step 5 Using jQuery and Loading Content

Right, this is where the magi happens!

What we are going to do now is

1. Link to to jQuery library
2. Tell jQuery to load our ‘getProducts.php’ and populate our widget
3. Tell jQuery to do all that while making some nice transition effects.

Okay so firstly, open up ‘index.php’ and in the header section, link to jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Now that we have linked to the jQuery file, we need to write some jQuery. Our main objective is to fade out and empty the current content from the widget before loading our ‘getProducts.php’ file which in turn re-fills the widget. Once it’s done, we want to fade it in nice and slowly.

We could stop there, and it’d look okay, but in order for it to work correctly we need to set a refresh rate, so what we need to do is create all the above in a function called ‘refreshProducts’. Then later, we can call this function but also specific how often to call it.

<script type="text/javascript">
 
		<!-- start a function that will fade out the current content-->
        function refreshProducts() {
 
           $("#widgetbox").fadeOut(750, function() {
 
		   		<!-- empty the current content and then fetch new data -->
				$("#widgetbox").empty
				<!-- load the getProducts.pho file which will replace all the content -->
                $("#widgetbox").load("getProducts.php", function() {
                    $("#widgetbox").fadeIn();
                });
            });
 
        };
 
		<!-- initiate the function above -->
    	$(function(){
    		refreshProducts();
 
			<!-- set the interval for refreshing, default set to 6.5 seconds -->
    		var int = setInterval("refreshProducts()", 6500);
 
    	});
    </script>

We’re finished!

That’s it! You can now preview in the brower and wait, and you should see your content fade out every 6.5 seconds before re-appearing with new content! The uses for this range from news tickers, product listings, portfolio projects as well as even a rotating advertising wall.

The final code for the ‘index.php’ page looks like this:

<!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=utf-8" />
<title>Product Listing Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<link href="css/styles.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript">
 
		<!-- start a function that will fade out the current content-->
        function refreshProducts() {
 
           $("#widgetbox").fadeOut(750, function() {
 
		   		<!-- empty the current content and then fetch new data -->
				$("#widgetbox").empty
				<!-- load the getProducts.pho file which will replace all the content -->
                $("#widgetbox").load("getProducts.php", function() {
                    $("#widgetbox").fadeIn();
                });
            });
 
        };
 
		<!-- initiate the function above -->
    	$(function(){
    		refreshProducts();
 
			<!-- set the interval for refreshing, default set to 6.5 seconds -->
    		var int = setInterval("refreshProducts()", 6500);
 
    	});
    </script>
 
</head>
 
<body>
 
    <h2>Our Awesome Products</h2>
 
    <div id="widget">
 
        <div id="widgetbox"><!--This is where our products will be loaded into -->
 
        </div>
        <!--End WidgetBOX -->
 
    </div><!-- End Widget Container -->
 
</body>
</html>

The actual widget looks like the below, and can easily be customised by amending the CSS to match your own site.

We’ve created quite a bit, yet it all seemed quite simple didn’t it? There are plenty of ways to move this forward, and some of you will be keen to include links to the products themselves and that is why I included the list-item hover effect. Some other modifications/improvements would me:

• Include an admin section to insert new records (including an image resizer…)
• Lightbox functionality to bring up full details of the product.
• Secure database connections
• Plenty more…

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.

In this article we’ll take a quick look at several common multilevel menu options and then I’ll show you how to create a “mega menu”.

10 Basic Multilevel Menu Options

Here are a few of the basic drop down menus available from around the web. Don’t let the basic design examples fool you, you can easily customize these with CSS to make them as pretty as your design.

[JS/CSS] Drop Down Tabs (5 styles) - Dynamic Drive

[CSS] A cross-browser drop-down cascading validating menu - CSSplay

[JS/CSS] Drop-Down Menus, Horizontal Style - A List Apart

[JS/CSS] Superfish jQuery menu plugin - Joel Birch

[JS/CSS] Sexy Drop Down Menu w/ jQuery & CSS - Noupe

[JS/CSS] Free CSS Drop-Down Menu Framework - Lwis.net

[JS/CSS] JavaScript Dropdown Menu with Multi Levels - Leigeber.com

[CSS] Create Vimeo-like top navigation - Janko at Warp Speed

[JS/CSS] Smooth Navigational Menu (v1.3) - Dynamic Drive

[JS/CSS] Designing the Digg Header: How To & Download - CSS-Tricks.com

6 Creative/Advanced Multilevel Menu Options

If you’re looking for a multilevel menu that’s a little less common to fit a more unique design then these are some great options. All of these use javascript and css.

Mif.Menu using Mootools - mifjs.net

A circular menu with sub menus - CSSplay

Fancy Sliding Menu For Mootools - Andrey Sellick

Sliding Jquery Menu - hv designs

jQuery (mb)Menu 2.6 - Matteo Bicocchi

Accordion Menu script (v1.7.1) - Dynamic Drive

Creating a Mega Menu

I’ve listed quite a few options for several different types of multilevel menus above so you’re bound to find something to fit your project’s needs. However, one type of menu that I really like and don’t see used all too often is the “mega menu”. Take a look at the example to see what I’m talking about.

View Demo
Download Source

I’ve put a quick example together of a “mega menu” with two versions. One using only CSS and one using jQuery to spice it up a tad. As you can see, it provides users with more information than just boring text links. There’s a lot of cool stuff you can do with this concept. A great real world example of this type of menu is at Gateway’s website shown below.

Building something like this isn’t as hard as you might think although it might take a little time to style things the way you’d like. Overall it provides better usability and gives visitors easy access to more information without needing to dig around.

The HTML

We’ll start with a basic HTML 4.01 Strict template, title and unordered list with links. I’ve given the ul an ID of “menu1″ because I plan on including more than one in the example. I’ve also given it a class of “cssonly” which we’ll use for the javascript additions later.

	!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<title>Mega Menu Example</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="wrapper">
		<h1>Mega Menu Example #1 (CSS Only)</h1>
		<ul class="mainMenu cssonly" id="menu1">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
		</ul><!-- end ul .mainMenu #menu1 -->
	</div><!-- end div #wrapper -->
</body>
</html>

Then we’ll add in the sub navigation unordered lists with the following format. I’ll add the same structure to Link 1, 3 and 5. You’ll notice the first list item is a title and we’ve included images and additional text in the sub navigation list items.

<li><a href="#">Link 1 &raquo;</a>
	<ul>
		<li class="title">This is the Link 1 title</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/firefox-bag.png" alt="Firefox Bag" />
				<span>Link 1a</span>
				<span class="moreinfo">More info about list item and image could go here</span>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/fixit-bag.png" alt="Fix It Bag" />
				<span>Link 1b</span>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/globe.png" alt="Globe &amp; Bag" />
				<span>Link 1c</span>
				<span class="moreinfo">More info about list item and image could go here</span>
			</a>
		</li>
	</ul>
</li>

The CSS

First we’ll position and style the first level list and links.

/* Style the menu and position list items */
ul.mainMenu {
	position: relative;
	height: 35px;
	padding: 0 8px;
	background: #fff url(images/menubg.png) repeat-x;
	clear: both;
}
ul.mainMenu li { float: left; list-style: none; }
 
/* Style and position links and images in second level list items */
ul.mainMenu li a {
	display: block;
	height: 19px;
	padding: 8px 12px;
	text-decoration: none;
	color: #666;
}
ul.mainMenu li a:hover {
	color: #222;
	background: url(images/menubg-hover.png) repeat-x;
}

Then we’ll position and style the sub navigation lists. To trigger the second level list we’ll change the display property from “display:none” to “display:block” when the first level links are hovered over. It’s important to note that this will not work in IE6 because of IE6’s lack for pseudo selectors. However, once we add some javascript it will fix that.

/* When hovering over main list items, show second level lists */
/* This is only for #menu1 */
ul.cssonly li:hover ul { display: block; }
 
/* Position and style second level lists and items */
ul.mainMenu ul {
	position: absolute;
	top: 35px;
	left: 8px;
	padding-top: 5px;
	background: #fdfdfd url(images/shadow.png) repeat-x;
	display: none; /* Hide until parent list item is hovered on */
}
ul.mainMenu ul li { padding: 8px; border-right: dashed 1px #f4f4f4; }
ul.mainMenu ul li:last-child { border: 0; }
ul.mainMenu ul li.title {
	float: none; /* Remove parent float setting */
	padding: 6px 10px;
	border: 0; /* Remove parent border setting */
	border-bottom: dashed 1px #f4f4f4;
	font-size: 11px;
	font-weight: bold;
}
ul.mainMenu ul img { height: 64px; width: 64px; }
ul.mainMenu ul span { display: block; }
ul.mainMenu ul a {
	height: 80px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border: solid 1px #ebebeb;
	background: #fff;
}
ul.mainMenu ul a:hover { background: #f4f7fa; }
ul.mainMenu ul a img { opacity: .7; border: 0; }
ul.mainMenu ul a:hover img { opacity: 1; }
 
/* When hovering over a list item link show the more info div */
ul.mainMenu ul a:hover span.moreinfo { display: block; }
 
/* Position and style the more info div */
ul.mainMenu ul span.moreinfo {
	display: none;
	width: 275px;
	position: absolute;
	bottom: -25px;
	left: 12px;
	padding: 6px 10px;
	background: #fff;
	text-align: left;
	font-weight: normal;
}

Lastly, I’ve added some CSS rounded corners so it looks better for those of us using Safari and Firefox. I also included a couple minor fixes for IE6.

/* Rounded corners */
ul.mainMenu { -webkit-border-radius: 6px; -moz-border-radius: 6px; }
ul.mainMenu ul { 
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
}
div.wrapper,
ul.mainMenu ul a { -webkit-border-radius: 10px; -moz-border-radius: 10px; }
 
/* IE6 FIXES */
ul.mainMenu li,
ul.mainMenu li a { _float:left; _display: inline; }

That’s all you need for the CSS only version but it’s a little boring so lets at some quick jQuery to at least give it a nice sliding effect.

The jQuery

First we’ll remove the “cssonly” class. The reason I’ve done it this way is so that if javascript is disabled then the “cssonly” class will remain in the HTML and the menu will continue to function.

Next we’ll select our menu (#menu2 is the second menu in the example files), find the sub navigation lists and slide them down when we hover over the parent list item. Once we hover out of the parent list item or sub navigation list then it slides back up. Pretty easy eh?

<script type="text/javascript">
	$(function() {
		// If no JS CSS menu will still work
		$("#menu2").removeClass("cssonly");
 
		// Find subnav menus and slide them down
		$("#menu2 li a").hover(function(){ 
			$(this).parent().find("ul.subnav").slideDown(400);
			$(this).parent().hover(function() {
			}, function() {
				// On hovering out slide subnav menus back up
				$(this).parent().find("ul.subnav").slideUp(400);
			})
		});
	});
</script>

And there you have it. A quick and easy way to spruce up the regular, boring multilevel menus so commonly used. Keep in mind this is just short demonstration of what could be done. I’ve seen a few websites with more information included.

View Demo
Download Source

Conclusion

Hopefully this tutorial and the example menus listed above give you some great ideas for your website or your next project. I seem to hear a lot of people say “well it’s limited here” or “it doesn’t do this very well”. I want to remind everyone that tutorials like these are brief examples of what can be done, we can’t do everything for you. Ideas like these are very flexible and it’s up to all of you creative geniuses out there to take what you’ve learned and make it even better.

Instead of thinking “can’t”, think “can”. It’s just a matter of figuring out how. There’s a lot of creative stuff out there so I hope to see some of this stuff in more templates submitted to Theme Forest.

• Please subscribe to the Theme Forest RSS Feed, and follow us on Twitter.