PDA

View Full Version : adjusting the dropbox appearance



CNT
02-17-2017, 05:53 PM
1) Script Title: adjusting the dropbox appearance

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

3) Describe problem: not a problem, just questions...

OK, I hope I am doing this right (following the forums, posting in the right places, etc).

*) How to remove the box shadow out of the submenus?

*) How to make the box edge into "rounded corner" (including the main menu)?

*) This side menu design in CSS uses "." (dot), so that's CLASS then? Was there a reason for that, instead of use "#" for ID? Just asking, nothing I want to change.

*) How to call the NAV.PHP into INDEX.PHP? What I am trying to do is put all the menu coding in NAV.PHP file, to make the INDEX.PHP file less clutter.

*) Do I need Java file somewhere for this to work?

*) Should the website be in PHP or HTML, or it doesn't matter? See below of my coding:


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

<?php include("nav.php"); ?>

<div>
<p> ...</p>
<p> ... Words to live by...</p>
<p> ...</p>
</div>

NAV.PHP
<div class="nestedsidemenu">
<ul>
<li><a href="#">Home</a></li>
etc...


STYLE.CSS
stuff...

styxlawyer
02-17-2017, 08:51 PM
Is this what you are looking for?

http://mydesk.myzen.co.uk/ddStuff/sideMenu/

CNT
02-17-2017, 09:42 PM
Is this what you are looking for?

http://mydesk.myzen.co.uk/ddStuff/sideMenu/


*) How to remove the box shadow out of the submenus?

*) How to make the box edge into "rounded corner" (including the main menu)?

YES. THAT is great. I couldn't find the trick myself?


http://mydesk.myzen.co.uk/ddStuff/sideMenu/

This is also what I am interested in too... if I create website, it always ends with a filename, but yours shows up to foldername. How to do that? Even better, I have seen that home address remains throughout regardless how many pages jumping back and forth (stays like http://mydesk.myzen.co.uk). This is really OT, but something I like to learn as well (hopefully requires NO Java??).

Chuck

styxlawyer
02-18-2017, 08:17 AM
If you look at the source of that page (CTRL+U on your browser) you'll see that I have just added a "class" to the first and last entries in each list of links. At the top of the stylesheet there are two new entries which add rounded corners to the top and bottom of those tow classes respectively. The drop-shadow is simply commented out in this entry in the stylesheet:




/* Sub ULs style */
.nestedsidemenu ul li ul {
position: absolute;
left: -5000px;
top: 0;
opacity: 0;
width: 230px;
visibility: hidden;
/* box-shadow: 2px 2px 5px gray; */
-webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
transition: opacity .3s, visibility 0s .3s, left 0s .3s;
}



If you are just starting out this series of tutorials (http://www.ironspider.ca/website/fundamentals.htm) is quite informative.

CNT
02-18-2017, 03:05 PM
If you look at the source of that page (CTRL+U on your browser) you'll see that I have just added a "class" to the first and last entries in each list of links.

I see that (class first and last)


At the top of the stylesheet there are two new entries which add rounded corners to the top and bottom of those tow classes respectively.

Could you help by providing coding for these two class for me? It isn't shown in the source page.


The drop-shadow is simply commented out in this entry in the stylesheet:

Interesting as I did that, it didn't remove the shadow edges? I did that few times, but now it finally did that. What matter now is it works now :)

As in original post... (6) should use all HTML file extensions, or use PHP? it's my understanding that they are same thing, just changing the extensions (which I think I am wrong too). (4) how to call <div class="nestedsidemenu"> FROM NAV.PHP (would like to have all ul/li coding in there) into other webpages?

I WILL THANK YOU ;)

styxlawyer
02-18-2017, 03:28 PM
The CSS file is here:

6143

The two new classes are at the top and the commented-out drop-shadow is on line 62.

HTML is the basic coding system for all web pages and PHP is a server-side programming language which executes on the server when the page is accessed and serves HTML to the browser. PHP pages can also contain raw HTML. I think you need to do a lot more basic reading before you start trying to build web pages.

CNT
02-19-2017, 09:15 PM
I should THANK YOU now...

I still have some little unanswered questions (still in the original post)... but, as said, GO READ!

CNT
02-22-2017, 04:13 AM
As I kept working on this... I have come across to this coding and I put it in the very end of CSS.


@media screen{
body>div.nestedsidemenu{
position:fixed;
}
}

While it does what I want it to do (side menu always stays in one spot and does not move). It still doesn't put the main content onto the right side of the menu (text scrolls behind the menu). I am thinking something like height=100% but don't know where to put it. Is this above the right coding to do this or there's other (better?) ways to do this?

The hover submenu, of course, would spread out over main content.

Maybe I would like to put an image or other links or even gifs/video below the menu, as long it still remain fixed and within the menu width (the whole left side is fixed).

Beverleyh
02-22-2017, 06:24 AM
It sounds like you would benefit from a crash course in learning how to code a basic structural page layout. This is a good site to get you started http://learnlayout.com

CNT
02-22-2017, 03:52 PM
a crash course
http://learnlayout.com

Well, for starters, I too have been on a little mission some time ago with what screen resolutions do most users set on, along type of monitor widths. But, now it's long ago (we are even in HD era and possibly 4K by now).

First off, this crash course didn't enable me to create a fixed side. Yes, it supposed to give me stuff for me to think and try different things. One way I learn things is to see an actual working coding (and results). Then sometimes so much coding just overwhelming at once. Like for example, when I download the nestedsidemenu, I understood so much of it, yet couldn't understand the -webkit- and -moz- (still don't), but hope to learn as well. Such sometimes omit/comment out parts of coding doesn't change anything to be able to see what it does (along with browsers cache issues I had too).

Back to the crash course... box-sizing and border-box is admirable, very good feature. I bookmarked that link and will review it over again soon.

Of course, dynamicdrive.com isn't the only website. I use w3school.com too, along with others (YouTube.com too). I am looking for step-by-step teachings. I am not excusing myself being DEAF, but lot of teachings are auditory. Again, your crash course was good one.

Chuck

CNT
02-23-2017, 11:21 PM
http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/

Good morning? It's 4:00am and I just found out this CSS Library. Sort of wish someone would point me to this before. I guess I would need to get nosy in DD website.

Anyway, this worked exactly what I was attempting to do. Now, another issue... while the side menu does show in the left "frame" (is that what it's called?), the spread-out submenu is "behind" the main content (can't see the submenus). Anyone help here?

CNT
02-24-2017, 10:59 AM
Is this what you are looking for?

http://mydesk.myzen.co.uk/ddStuff/sideMenu/

I tried and couldn't find the code to rid the space between the margin/padding. Seeing that the left side of menubox is spaced away from the very edge of the left side of screen. I want the menubox to be touching the left edge (and show full width 200px, along with fixed left bar, as in one thread above). Am I saying it right? Help here?

Chuck

styxlawyer
02-24-2017, 11:46 AM
That's because the menu is in the page body and the default margin for the <body> tag in most browsers is 8px. If you want the page body to butt up hard against the left side of the browser window change the <body> tag to this:



<body style="margin-left:0;">

CNT
02-24-2017, 03:01 PM
<body style="margin-left:0;">


I just did that and it didn't do it? I am using Chrome if that's what it is?

I also tried to widen the width of everything, nothing changes either? I even clear the cache each time too. Wherever the code is "width: 200px", I change it to "208px", nothing changed?

Perhaps I need to study browsers before I could do website development? What happen to Plug-n-Play? LOL

styxlawyer
02-24-2017, 03:26 PM
It works for me:

http://mydesk.myzen.co.uk/ddStuff/sideMenu/

CNT
02-24-2017, 03:50 PM
<body style="margin-left:0;">

I see it is working for yours. I did exactly like that in the index.php. It's still NOT doing it for mine? I will have to look around the coding... perhaps start over from scratch (copy/paste, test, move to next step, etc).


<br style="clear: left" />

BTW, what is this for (in end of ul/li)?

CNT
02-25-2017, 04:00 AM
perhaps start over from scratch (copy/paste, test, move to next step, etc)


<br style="clear: left" />

BTW, what is this for (in end of ul/li)?

I did start scratch and it worked for a while (took few steps and then leave to do errands, then test some more). Without adding the <body style="margin-left:0;">, the text (didn't bother with nav yet) did butt against the left side of browser. Then add one thing, still butt there. Leave again, then test it again, it finally push a gap. So, I clear backwards, it still not change. Clear the cache too, changed the text too, but the gap still not butt again. I guess something is wrong, whether it's cache or browser or code?

Maybe I should go back to top horizontal menubar? this is how I original had in my previous website, but then it push the bar down a little, leaving a white gap on top (and can see text scrolling there too).

Appears to be popular yet is a "3 lines button" and sweep menu, maybe that would be best of all? Some with opacity.

styxlawyer
02-25-2017, 09:59 AM
If you are having trouble with a page not behaving it's worth running it through the W3C validator:

https://validator.w3.org

You can either test a page over the internet or upload a file directly.

CNT
02-25-2017, 10:16 PM
https://validator.w3.org

Error: Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.)


<?php include("navmenu.php"); ?

That's just the index.php, didn't test other php files.

styxlawyer
02-25-2017, 11:53 PM
You can't test PHP pages with the W3C validator, you have to serve them to the browser first. If you are running the pages under WAMP, open the local page with your browser through localhost, press <CTRL> + U to view the page source and then save the HTML to a file which you can run through the validator. Otherwise you will have to host the pages on the web when the validator can access them as the HTML which is served to the browser.

CNT
02-26-2017, 10:00 PM
Document checking completed. No errors or warnings to show......

CNT
02-27-2017, 02:03 AM
I think I am wasting so much time here. All that work with localhost, then for once, just want to upload to actual webhost, run my domain name, now it's so different? I think I need to forget the localhost and do all in real webhosting? Maybe it's WAMP? Thinking should have used SQL Server 2008 for localhost.

Using localhost, while it worked for a while, now the <body style="margin-left:0;"> no longer works, and now pushes to 16px (doubles the 8px). I took this line of code out and clear the cache, it still 16px. So, leaving it as is, I uploaded to real webhost, it butt to 0px. Not only that, the whole "fixed side" doesn't appear in real webhost. I reboot the PC, run the WAMP, run the localhost, it still shows as I wanted (so much of it, even if localhost is actually working).

As my previous post, the w3school validator shows no errors. My code is perfect? Can't be the real webhost is fault while the localhost is partial working?