Member Avatar for cyberwizmj


I am a beginner with asp.net. I want to make a menu towards the left with content area towards the right. Just simple clicking link in the left frame and displaying data in the right frame.. only that I don't want to use frames and I'd like the menu to not to scroll up with the content on the right. Also, I can't use ajax controls, don't want to use flash and don't know java too well...

In the website I wanted to put link buttons/image buttons in the menu to display data in a gridview.

Any type of approach to do the above is welcome.. css/css2,tables,master pages, little bit of this n that, etc...

Thanks in advance :)

smpl.JPG 12.29 KB
  • 2 Contributors
  • 4 Replies
  • 215 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by cyberwizmj

Dani AI

Generated

raised the key constraints (no frames, no PHP on the host, no AJAX controls and limited JavaScript) and ’s div-based idea is a solid start. Two straightforward ASP.NET-friendly patterns that meet those constraints are: 1) use a Master Page with the left menu baked into the master and individual content pages for each menu item (simplest, bookmarkable), or 2) use a single content page with a server-side placeholder and load ASCX user controls based on a query string (keeps everything in one file and avoids client-side scripting).

A compact server-side example (pattern #2): add a PlaceHolder to the content page and load trusted user controls from a whitelist in Page_Load so arbitrary files can’t be injected.

<!-- in the content page -->
<asp:PlaceHolder ID="phMain" runat="server" />

// in code-behind (C#)
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string page = Request.QueryString["page"] ?? "home";
        switch (page)
        {
            case "articles":
                phMain.Controls.Add(LoadControl("~/Controls/Articles.ascx"));
                break;
            case "products":
                phMain.Controls.Add(LoadControl("~/Controls/Products.ascx"));
                break;
            default:
                phMain.Controls.Add(LoadControl("~/Controls/Home.ascx"));
                break;
        }
    }
}

To keep the left menu from scrolling, use a fixed-position sidebar and let the content area scroll independently:

#sidebar { position: fixed; left: 0; top: 0; width: 200px; height: 100%; overflow: auto; }
#content  { margin-left: 210px; padding: 12px; }

Notes and cautions: prefer plain anchor links (?page=articles) for bookmarkability and SEO rather than JS-only navigation; always validate the query string (whitelist or switch) before calling LoadControl; test the layout on small screens and use a media-query fallback to collapse the fixed sidebar on mobile. This keeps the implementation simple, avoids frames/AJAX/Flash, and matches the server-side environment described in the thread.

Recommended Answers

All 4 Replies

Member Avatar for lio04

Very easy way is use <div id> tags and extern style.css file.

e.g. this code in HTML file:

In header:

<link rel="stylesheet" type="text/css" href="style.css" />

Body:

<body>
<div id="container">
	
	<div id="menu">
	blah blah
	</div>

	<div id="content">
	blah blah
	</div>
</div>
</body>

and CSS:

#container {
  width: 500px;
  margin: 0 auto; 	
}
  

#menu {
  width: 200px;
  height: 600px;
  float: left;
  background-color: #c6d9f0;
  }

#content {
  width: 300px;
  height: 600px;
  float: left;
  background-color: #ffffff;
}

I hope, that I understand right, what you want. :)

Member Avatar for cyberwizmj

How do I open new pages in the content area?

Member Avatar for lio04

e.g. with PHP function inserted in content:

<?php
         $menu = $_GET['menu'];
         if ($menu=="") $menu=index;
         $filename="_".$menu.".php";
         include "$filename";
         ?>

In menu can be <a href="index.php?menu=articles">Articles</a><br> if is file named _articles.php .

Member Avatar for cyberwizmj

unfortunately my server doesn't support php... :(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.