DC – Vertical Responsive Mega Nav Menu V1.0 – A Comprehensive Review
I had the opportunity to try out the DC – Vertical Responsive Mega Nav Menu V1.0, and I must say that it’s an incredibly impressive and versatile navigation menu tool. In this review, I’ll summarize my experience with the menu and provide some constructive feedback.
Overview
The Vertical Responsive Bootstrap Navbar, or Vmenu for short, is a sleek and customizable navigation menu designed using CSS2, CSS3, and jQuery. It’s compatible with Bootstrap and supports both vertical and sticky versions, with a total of five color schemes to choose from. With its component-based coding structure, Vmenu offers incredible flexibility for building custom Bootstrap responsive navigation bars.
Features
- 100% Responsive Layout: Vmenu’s responsive design ensures that the menu remains functional and visually appealing across all devices.
- 5 Color Schemes: There are five pre-designed color options available, which can be easily changed with a single click.
- Open Sans Font: The menu ships with the popular Google web font, Open Sans, which provides excellent font rendering and legibility.
- 12-Column Bootstrap Grid System: For developers familiar with Bootstrap, this makes it easy to integrate Vmenu with an existing project.
- 3-Drop Down Types: There’s a choice of three different dropdown animation styles, adding visual interest and options for customization.
- Flat Color Effect: Vmenu supports subtle flat color effects, which create an attractive and modern visual look and feel.
- Comprehensive Documentation: The menu comes with easy-to-follow documentation, making it straightforward for designers and developers to get started.
Changes and Improvements
After release version 2.0, significant enhancements were made to the menu. Improvements include:
- Changed images, keeping all color variations.
- Simplified the landing page design.
- Added the latest JavaScript plugin.
- Made some responsive adjustments.
- Revised the documentation.
- Enhanced file organization with a PHP contact script.
- Validated HTML form formatting.
- Applied the best Google web font.
- Reduced the menu code complexity.
Sources and Credits
The developer acknowledges the following resources in the creation of Vmenu:
- Google Web Fonts
- Fontawesome icon (Free)
- Pixbay.com images
- Bootstrap for CSS
- JavaScript and latest plugins
Support
In terms of support, the developer promises response to pre-purchase inquiries about the menu, as well as offer assistance with installation, customization, and general project queries. If you encounter issues or have questions, you can contact support directly at support@designcollection.in.
Conclusion
In summary, Vmenu – Vertical Responsive Mega Nav Menu V1.0 is a sophisticated and highly customizable navigation menu system perfect for developers and designers familiar with Bootstrap. With its seamless transitions, attractive color schemes, and compatibility with a wide range of devices and modern browsers, Vmenu promises to be a valuable addition to your workflow. For a 5-CSS framework, I believe there’s immense potential to deliver extraordinary results.
User Reviews
Be the first to review “DC – Vertical Responsive Mega Nav Menu V1.0”
Introduction
The DC - Vertical Responsive Mega Nav Menu V1.0 is a powerful and highly customizable navigation menu plugin designed for WordPress websites. With this plugin, you can create a responsive and mobile-friendly mega menu that adapts to different screen sizes and devices. In this tutorial, we will guide you through the step-by-step process of setting up and customizing the DC - Vertical Responsive Mega Nav Menu V1.0 plugin.
Step 1: Installing the Plugin
To start using the DC - Vertical Responsive Mega Nav Menu V1.0 plugin, you need to install it on your WordPress website. Here's how:
- Log in to your WordPress dashboard and navigate to the Plugins > Add New page.
- Click on the "Upload Plugin" button and select the plugin file (dc-vertical-responsive-mega-nav-menu-v1.0.zip) from your computer.
- Click on the "Install Now" button to install the plugin.
- Once the installation is complete, click on the "Activate" button to activate the plugin.
Step 2: Configuring the Plugin
After installing and activating the plugin, you need to configure it to suit your website's needs. Here's how:
- Navigate to the Appearance > DC Vertical Responsive Mega Nav Menu page in your WordPress dashboard.
- Click on the "Configure" button to open the plugin's settings page.
- On the settings page, you can customize the following options:
- Menu Name: Enter a name for your menu.
- Menu Location: Choose where you want to display the menu (e.g., header, footer, etc.).
- Menu Style: Choose the style of your menu (e.g., vertical, horizontal, etc.).
- Responsive: Enable or disable the responsive design feature.
- Mobile Menu Icon: Upload a custom icon for the mobile menu.
- Mobile Menu Text: Enter the text that will be displayed on the mobile menu.
- Click on the "Save Changes" button to save your settings.
Step 3: Creating Menu Items
To create menu items, you need to create a new menu and add items to it. Here's how:
- Navigate to the Appearance > Menus page in your WordPress dashboard.
- Click on the "Create a New Menu" button to create a new menu.
- Enter a name for your menu and click on the "Create Menu" button.
- Add menu items to your menu by clicking on the "Add to Menu" button and selecting the pages, posts, or custom links you want to add.
- You can also add sub-menus by clicking on the "Add Sub-menu" button and selecting the menu items you want to add as sub-menus.
- Click on the "Save Menu" button to save your menu.
Step 4: Customizing the Menu
To customize the menu, you can use the plugin's built-in customization options. Here's how:
- Navigate to the Appearance > DC Vertical Responsive Mega Nav Menu page in your WordPress dashboard.
- Click on the "Customize" button to open the plugin's customization page.
- On the customization page, you can customize the following options:
- Menu Background: Choose the background color or image for your menu.
- Menu Text Color: Choose the text color for your menu.
- Menu Link Color: Choose the link color for your menu.
- Menu Hover Color: Choose the hover color for your menu.
- Menu Padding: Adjust the padding for your menu.
- Menu Margin: Adjust the margin for your menu.
- Click on the "Save Changes" button to save your customizations.
Step 5: Displaying the Menu
To display the menu on your website, you need to add a widget or a shortcode to your website's theme. Here's how:
- Navigate to the Appearance > Widgets page in your WordPress dashboard.
- Drag and drop the DC Vertical Responsive Mega Nav Menu widget to the desired location on your website.
- Configure the widget settings as needed (e.g., menu name, menu location, etc.).
- Click on the "Save" button to save your widget settings.
Alternatively, you can use the shortcode to display the menu. Here's how:
- Navigate to the Appearance > DC Vertical Responsive Mega Nav Menu page in your WordPress dashboard.
- Click on the "Shortcode" button to open the shortcode page.
- Copy the shortcode and paste it into your website's theme files or page content.
- Configure the shortcode settings as needed (e.g., menu name, menu location, etc.).
Conclusion
In this tutorial, we have covered the step-by-step process of setting up and customizing the DC - Vertical Responsive Mega Nav Menu V1.0 plugin. With this plugin, you can create a responsive and mobile-friendly mega menu that adapts to different screen sizes and devices. By following the steps outlined in this tutorial, you can customize the plugin to suit your website's needs and display the menu on your website.
Setting 1: General Settings
The DC - Vertical Responsive Mega Nav Menu V1.0 requires that the container element for your navigation menu is wrapped in a. navbar element and has a. dc-vertical-navbar class. Add these classes to the container element:
Setting 2: Navigation Structure
Define your navigation structure using an unordered list (
- ) inside the.navbar element:
- Set the maxwidth of the menu (default: 990px) - Set the minimum value of the responsive width (default: 480px)
- Set the font sizes and colors for the mobile navigation (set them equal to the font sizes and colors used in your main menu) Example:.dc-navbar.menu-link { font-size: 0.9em; color: #ddd; }
Setting 3: Mobile Navigation
Customize the mobile navigation by setting up the following options in the stylesheet or by using CSS overrides:
Setting 4: Transition Effects
Customize transition effects for your navigation menu by setting up transition and timing properties for the.dc-slide-left and.dc-slide-right classes in your stylesheet: .dc-slide-left,.dc-slide-right { transition: left ease-out 0.2s; } .dc-slide-left { animation-duration: 0.4s } .dc-slide-right { animation-duration: 0.4s } For these transitions, adjust the duration value of the transition property in the.dc-navbar section.
Setting 5: Stylesheet Override
Add unique styles for your menu by targeting your.dc-navbar class with customized CSS properties: .navbar.dc-vertical-navbar { background-image: url("images/navbar.png"); padding: 0.5em; }
Customize as needed
Here are the features extracted from the content:
- 100% Responsive Layout
- 5 Color Scheme
- Google Web Font - "Open Sans"
- 12 Coloumn Bootstrap Grid System
- Drop Down with 3 Types
- Flat color Effect
- Documentation included
- Clean Design and Code
- Easy to Customize
- Easy to use
Additionally, I noted that:
- It's a Vertical Responsive Bootstrap Navbar that's compatible with Bootstrap.
- It's component-based, using CSS and JavaScript code.
- It has a vertical side menu, suitable for any type of website and Template or Landing page.
- It comes with a sticky version and 5 different color patterns.
- The design is flexible and customizable.
I hope that helps!
Related Products
$7.00
There are no reviews yet.