Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

Tags: javascript,jquery,html,css

Problem :

I am developing a website and as a part of this website to design a webpage just for showing 11 elements which about the principals of the company. Each one of these elements has a long description. The website design is as following: menu bar with logo at the top, side bar at the left and body at the right.

At the beginning, I was thinking to list the elements on the side bar and the description of each elements will be appeared on the right when the user clicks on a specific element (using javascript), but later on the customers don't like this design and they said it will confuse the user since he will need to scroll down for reading a long description for just one element and then scroll up to select another element. Besides that, how will the user know the flow of navigation of this webpage? which means that the elements on the left and when he clicks on one of them, he will see the description on the right?

So how should I design this page? please tell me if I should use specific css layout or javascript or jquery plugin (mention the name of the plugin if it is possible)

Solution :

first, you can play with the basic principle on this fiddle. Playing with "position: fixed", float and negative margins does the trick.

Then you can look at this page for plenty examples.

But your best bet is to use any decent jquery menu plugin, they all all provide this functionality. just google "jquery menu" or "css fixed menu", or a mix to have tons of choices.

    CSS Howto..

    How would you go about placing li in different divs?

    How to keep indent in lists with CSS?

    How to display a child div BEFORE the parent div?

    How to align Navbar at bottom of window, but have content under this in CSS?

    how to bench a css pseudo-elements

    how to add class with animation?

    How can we control the size of a special character?

    how to print 60 degree rotated watermark in HTML CSS

    how to center image + text in an li Element

    How to compress CSS

    How can I place a checkbox within a button? [closed]

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to move items to left inside a div?

    How to replace a text-align: -webkit-center?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    How to target the text in an element but not the text in nested elements with CSS

    How can I make the BODY element take up 100% height of the HTML element?

    How to change the css color code permanent using php

    How to put borders to
  • onclick in css Tabs
  • How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    CSS: How to toggle switch action on the link?

    css animation how to get the ball to bounce

    How to change CSS color values in real-time off a javascript slider?

    How to handle multiple-language site without database or backend code?

    How can I remove dependancies that are non existent or not being called on by any document?

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to force enter key to make a line break inside iframe editor

    How to start an css effect when website open

    How to rotate an object 120deg on every click with CSS-transition/transform throu JS