How to Design This Style of Menu !!!

Terry

11y1.2k.NET

Hello,

I want to create a Menu in my master file - horizontal menu with vertical sub menus. I want to have images on top of each menu. Each menu & it's sub Menu of different color. Of this type as shown below :

If the above img is not visible

Link to the image of the Menu I want - https://onedrive.live.com/redir?resid=572D7026B8B4C709!1387&authkey=!AMV1QfmQw9cTPBg&v=3&ithint=photo%2cpng

Or check the menu in DaniWeb site. On MouseOver, the sub menu's come up. I tried using ,

<%--

--%>

Hello, <%: Context.User.Identity.Name %> !

CSS Class

.headerDiv {

position:absolute;

top:0;

left:0;

width:100%;

height:7%; /*40px*/

overflow:hidden;

background: black;

color: white;

text-align:left;

padding-left: 20px;

padding-top:7px;

font-size:larger;

}

Along with on right menu i.e. of Logout & User name.

With the above trials, either the right menu doesn't come OR menu is coming below the image & Label. OR The sub menu's doesn't come or not visible as the header height is set.

What can be the best way to design such a menu ?

Any help is highly appreciated. Please try to guide soon.

Thanks.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Upendra Pratap Shahi11y ago
Accepted answer
read below article..

http://www.codeproject.com/Questions/680843/how-to-create-a-horizontal-menu-bar-using-navigati

http://www.c-sharpcorner.com/UploadFile/47548d/master-pages-in-Asp-Net/

http://www.c-sharpcorner.com/UploadFile/4e2862/dynamically-creating-menus-and-submenus-items-to-web-forms/
Terry11y ago
Upendra, Can you help me with these questions : 1) http://www.c-sharpcorner.com/Forums/Thread/299661/juiceui-datepicker-throws-error-unable-to-get-property-_at.aspx 2) http://www.c-sharpcorner.com/Forums/Thread/299632/problem-customizing-ajax-calendarextender-control.aspx Actually, I want to use a DatePicker. I initially tried wit hjquery, but that's work for me. Then I went for JuiceUI - that had worked, but don't know now why it is giving error. Lastly I tried with Ajax CalendarExtender, with that also it doesn't show properly. Please try to help me any of it. I just want my DatePicker to work. JuiceUI was really working great and as I wanted. Thanks.
Upendra Pratap Shahi11y ago
Your welcome @Tery...
thanks for apriciation ..
Terry11y ago
Thanks Upendra. I could create the menu using bootsrap & Css & nav.
ramya bharath11y ago
Check this example

https://jsfiddle.net/t36o56fL/