I know that this is not real coding issue question but I can't find god resources about this topic.
Although there are few tutorial none of them explain in details with good example how to style dnn menu.
What is the "real world" way to style dnn navigation menu skin?
By the navigation menu I think of menu similar to this:
http://cmstutorials.org/tutorial/view/how_to_build_a_kick_butt_css3_mega_drop_down_menu
http://www.red-team-design.com/wp-content/uploads/2011/03/css3-dropdown-menu-demo.html
The secret to really learning DNN is to find a skin that looks like you want, and then modify it from there. Unfortunately Skinning tutorials never materialized for the platform (along with a lot of other documentation)
I use the MinimalExtropy - index 1280 skin on my site with a container of MinimalExtropy - Title_Grey, you can them here: http://dnnskins.codeplex.com/releases/view/73347 . If you add a page to the menu it is added to a horizontal bar. Any pages that are children of that page show up in a drop down menu when you hover over it. Hope this helps!
First, it would help to know which menu system you are using. Hopefully, your skin uses the newer DDR menu, as it is reasonably well documents in the DNN Wiki at dnnsoftware.com. This is also information for the older NAV menu, and you can easily replace that with DDR with no other changes required.
As for tutorials, there are some really good skinning tutorials available at DNNCreative.com (disclaimer: subscription is required, and I do work for DNNCreative. In spite of that, the tutorials are really good.)
Related
anyone can help me create a menu that works like this on this page:https://www.cabinet-maker.co.uk/ for mobile.
I mean menu buttons and search, I really like it but I do not know how to create one, I'm new and I wanted to create one in my own blog.
You don't need a plugin, you can use plain JavaScript. I made a quick fiddle of it here:
https://jsfiddle.net/rajoh4bp/8/
Hover Over The Retail Navigation Bar Option Once You Are There.
You can use one of the jQuery plugins. For example https://mmenujs.com/ or https://corenav.com/index.html. Actually, there are a lot of menus, just google them and choose one of your favorite.
You can make some fancy css3 menus by starting from nothing. You can add javascript or not.
Even w3school have a cool little tutorial about mobile menus :)
The most important thing to learn in webdesign is the vocabulary, so you can make efficient searches queries and find immediately what your are searching for.
For this request, the important words are "menu" and "slide". And you find another w3school tutorial :)
What programming language can I use to incorporate the transition between when the user clicks on the right arrow on the middle right hand corner of the screen in the example. In addition, how can I place text next to the arrow?
Could someone recommend me any tutorials which I can also watch to develop my understanding of how to do this and get a basic starting template?
This kind of animation and transaction could be archived using both CSS and javascript. You can find easily a lot of useful resources and tutorials on the internet but my recommendations for you is to follow the posts on https://codepen.io/,
you will find there a lot of useful examples, posts and tutorials.
Im attempting to re-create the following layout seen in the screenshot below.
I wanted to ask whats the best way to go about creating the menu and content section.. im not quite sure on how to join the selected menu option with the content section, any advice would be great
Also should i use ul/li for the menu?
And the top menu bar (where is says create) should i use a big div, with each item as spans inside?
thanks for any help
In order to recreate this layout, you will need to learn a variety of concepts.
First, how to style an unordered list ( <ul><li> ) to work as navigation.
Second, you will need to learn how to position elements, either through using float:left|right or position:absolute|relative.
Finally, and perhaps most importantly, you will need to learn how to use either Google Chrome's Developer Tools or Mozilla Firefox's Firebug, as these are indispensable tools for reading and writing html/css. Specifically, you will need these tools in order to inspect the code for other websites to see how they implemented their design. This is perhaps one of the best ways to learn code (at least it was for me).
Providing a detailed description of how to do all of this would take too long and really detract from the valuable learning experience you will get from googling, fiddling around in the original source code, and trying to recreate it in your own site. If at any point in that stage you have trouble implementing something, then by all means come back to stackoverflow and ask for help :)
I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here:
http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
Even after looking at the updated example and downloading the source code from here:
http://www.lostsockdesign.com.au/apple-breadcrumb/index.html
I cannot tell how only the HTML and CSS "knows" which page it is currently.
Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?
Sorry for the simple question.. xD
UPDATE:
OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?
It doesn't.
That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.
Re: Update
Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:
Home
JavaScript
Vanilla
Gallery
Lightbox
Dice Roller
jQuery
Cycle
Click Tracker
Blog
RSS
Web Development
Object Oriented CSS
Currying Functions in JavaScript
CSS Reset Files
Gaming
Review: Super Mario Bros.
Camping Strategy in Oregon Trail
So Your Mom Wants to Play Wii Golf
Portfolio
DEA Website
We <3 Kittens
Nobody Likes IE6
So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:
My Site -> Blog -> CSS -> CSS Reset Files
This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.
How you do it is entirely up to you, but this is the basic concept.
You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.
Jotform.com uses a nice panel bar, the navigation system in the left side. It looks polished and is rich in functionality. The items have a highlight and have help '?' functionality which display a preview upon hovering.
I don't know if they built it themselves. I was wondering if there's a jQuery plugin or UI
Framework that helps me build something very similar. I already have Telerik's controls however this one looks cooler.
They probably did it with one of the JavaScript libraries they link to on the webpage. The probably did it with this one?
Edit: I was incorrect on closer inspection is is this file that is used when the side panel is used, but I cannot find the library that it came from.
Perhaps you could just contact them and ask?