Attention!
Massive Update!
A few days ago I launched a massive X3 update at
mjau-mjau.com. Truth be told, I am currently on a 6-day "vacation" (I don't do much vacation trust me), so I did not yet get around to posting until now.
This is a massive update, and X3 has been taken one huge leap closer to release. Please allow me to explain some new monumental features:
Mega Menu
Mega menu's are not for all websites, but for those of you with more than just a few pages/galleries, they offer an incredibly visual way for users to navigate complex structures and create a "mind-map" of the website and gallery.
If you check the current
mjau-mjau.com (not from a mobile device), you will see a topbar menu with 3 different examples of mega menu items:
-
[Concepts] - In this example, we are using the
"list" mega menu to create a very "human searchable" submenu with 2 levels of child items. Great for indexing deep gallery structures, and also provides an effective "preview" element.
-
[Blog] - Uses the "Carousel" mega menu to index a handful of child items. Although in the example, we are using it for blog pages, it could just as well be used to preview a group of galleries. The carousel works well for submenus with 1 level of child items, especially if there is some "chronologic" pattern to the child items.
-
[Contact] - Uses the "Data" mega menu to add simple data-, plugins or previews in the dropdown, for themenu item itself. Can be uses like in the example, to add contact form plugin and social plugin, or for adding preview of the page in the dropdown.
We have several additional mega menu layouts planned, including a grid-layout (good for gallery items), preview-hover and thumbnails. The new mega menu dropdown is state-of-the art UI.
Topbar fixed up
Visitors don't want to scroll all the way to the top of the page to get back to the navigation, but perhaps they don't want the navigation to be in the way when they are scrolling down either? We have integrated a trending interface method, which SHOWS the topbar navigation fixed when scrolling UP, but hides it when scrolling down. The idea is that if someone is scrolling down from the top of page, they are normally browsing for content below, while if they are scrolling up, chance is they are looking for the navigation. You can try this on the demo site ... simply try to scroll down in the mjau-mjau demo website, and then scroll upwards to see the navigation appear fixed. Pretty good no?
New Dropdown
There is also a brand new dedicated "standard" dropdown menu added, with better UI, unlimited levels and smooth animations, but unfortunately since we have are using mega-menu-options on all examples, we currently don't have this default method demonstrated.
Layout Schemes
You have seen font schemes, color skins and various gallery layouts, but the last part of the puzzle is layout schemes, which lets you decide the main navigation/layout. I had already created a new sidebar option, but I need a few more days to finalize it since the design changed a lot recently. Check out the links below for variations to the layout:
-
Slidemenu - This is new minimalistic navigation layout method for X3. It hides all navigation until a menu button is clicked or hovered. This method is very beautiful and minimalistic for those who want to keep the canvas nice and clean. Essentially, this method is the same layout as the new default mobile menu, but is slightly enhanced for larger screens. Features smooth state of the art UI and a new tree menu within for unlimited depth submenu levels.
-
Topbar center - This is currently the default layout as in the default mjau-mjau link. The topbar menu allows mega menu items, and fixed-on-scroll-up.
-
Topbar float - This is similar to topbar float, except it shows logo on the left and menu on the right.
-
Sidebar-left and
Sidebar-right layouts to be demonstrated next week.
With all the improvements above to the
topbar layout, I believe that some of you who originally preferred a sidebar menu, may now wish to consider the topbar menu. However, the new sidebar menu is still pending to be demonstrated shortly.
Mobile Slide Menu
We had to spend some time creating a new dedicated off-canvas slide menu for small screens and touchscreen mobile devices. The new mobile slide-menu is similar to the slidemenu layout option, which also works nicely for larger screens. Try out the demo from any touchscreen mobile device to experience the new smooth mobile menu, including the new tree menu within!
Design
I figured it was time to break away from the previous mjau-mjau.com design, into something more approachable and flexible as default for X3. As you can see, there has been a fair amount of change to design layout, font and colors.
Lato Font
Changed to the beautiful and versatile
Lato font as default, which suits a wide range of styles- and combinations on all devices. Fonts can of course be changed, but this is the best combo I came across.
New Footer
New cool default fixed footer for topbar layouts, editable from admin, with plugin options (social).
More ...
- Contact form - Widget for menu, editable from admin. Improved anti-spam measures. Remembers field entries from same user with html5 localstorage.
- Custom CSS - Add custom CSS directly from the admin.
- Social widget - Add social account links to settings, and apply social widget to menu and/or footer.
- Trimmed - Trimmed away approximately 30% excessive CSS and JS, improving loading and performance.
++ much more
See
update log with further details:
http://mjau-mjau.com/updates/#19sep14
Some info ...
* For the record, the audio player has been temporarily removed. Basically it has to be re-coded, and re-integrated into the layout options, and I did not see this as a critical issue.
* Skins and font-scheme links from earlier update posts may currently be broken, as I need to re-amend a lot of stuff after the heavily re-designed update.
I will answer all your recent questions/comments this Friday, and also add some information for the future!