Please To Have Your Opinions (aka Dummy Wants To Edit 150+ Categories Again)

[Greenguy]

I got a bug up my ass

With my current layout, the list of other categories is on the bottom of each category page:
http://www.link-o-rama.com/greenguy/1testold.htm

I'm thinking about adding the list of categories to either:
The Left Side Of The Pages: http://www.link-o-rama.com/greenguy/1testleft.htm
The Right Side Of The Pages: http://www.link-o-rama.com/greenguy/1testright.htm

If I do decide to put the list on either side, it wouldn't be difficult to do, just time consuming (but not 2 years like last time)

So, what's everyone's opinion? Please vote & comment if you feel it's necessary

[ecchi]

I voted left (damn my politics ) but that is assuming you thin the page to fit. It needs to be "less fixed" if you are going to add more columns. At the moment those fat banners force it too wide for an extra column. Make the size a percentage of the width instead of fixed eg:

<img src="spaba/cams/greenguycams03.jpg" width ="80%">

Simple but effective.

Also, the right column is for good sponsor ads, not for housekeeping or menus. You get most clicks in the right column.

[Greenguy]

Oh fuck - when I was testing things, I did it on a bannerless page, so everything fit.

Back to the drawing board I guess.

[mOrrI]

What resolution are you in?

[pc]

Why dont you use the css3 drop down menu from top or slide from left or right ( personally I would choose slide from left ) , that also looks great on mobile phones.)

http://callmenick.com/_development/slide-push-menus/
This way you wouldn't need to worry about resolution.

I would vote for left slide menu but theres no option for that in the pool. Edit.

[Greenguy]

Thanks pc - I will def look into that

[Greenguy]

OK - looking at what pc posted, I do like the idea of the menu sliding in from the left. But, you need to click a static "button" in order for the menu to appear. Seeing as most of my pages are really long, I thought a "button" that "hovered" on the top left of the page would be a good idea. So no matter where you are on the page, the nav "button" is there on the top left.

My problem, as you might have guessed from all the quotes, is that I'm not sure what these "things" are called in the HTML world. I searched for "hovering button" on that site pc linked to & got a bunch of things for when your mouse moves over a "button" or area of the page.

So if anyone has any tips as far as the wording on what I'm looking for...

[Greenguy]

...also, does anyone know if it matters that the menu sliding in will be longer/taller than the browser?

[pc]

You can have sliding div stick out like 10px from the left when its on hidden mode. On that 10px space you can have arrow pointing right side or image placed vertically with "menu categories" or whatever you like that serves as a static button.
Also since you have 150 categories or so you can make the panel absolute and scrollable.

[pc]

Make your test page and we go from there.

[Greenguy]

Originally Posted by pc

Make your test page and we go from there.

I'm actually working on that right now

[Greenguy]

OK - what did I screw up?
http://www.link-o-rama.com/greenguy/1-slide.htm

[Greenguy]

Actually, nevermind. I obviously screwed something up by adding my own stuff to the example.

I'm going to put his example online, make sure that works, then I'll monkey around with adding my own stuff & making changes.

[Greenguy]

OK - I'm stuck
http://www.link-o-rama.com/greenguy/1-slide.htm

I've got a button that is a standard button just sitting on the top of the page. When you click it, a menu does come out from the left, but it's not scrollable, and the "close" button on top doesn't work

[Cleo]

Originally Posted by Greenguy

OK - I'm stuck
http://www.link-o-rama.com/greenguy/1-slide.htm

I've got a button that is a standard button just sitting on the top of the page. When you click it, a menu does come out from the left, but it's not scrollable, and the "close" button on top doesn't work

Safari is showing this as an error but I don't know how to fix it.



Also you have the Google Analytics in the wrong place. It should be before the closing head tag.

[ecchi]

I know you probably won't care about this but be aware that I think you will find that what you are trying to do probably won't work in XP IE8. (The broken example does what you said on my Vista box but not on my XP IE8 box. Although, on the bright side, what does appear in XP IE8 is scrollable, which it isn't on Vista!)

[ecchi]

Have you noticed how we are helpfully posting more problems for you, but not giving you one iota of solutions!
We are nice like that.

[pc]

Working code below is the http://callmenick.com/post/slide-and...s3-transitions source code with bits of your css but now you have to eliminate things step by step to see what was the problem.
Couldn't figure it out so I started from the begining.
Hope that helps.

index.html

<html lang="en" class="no-js"><head>

<!-- title and meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Slide and push menus that are initially hidden off screen, and transition into view with CSS transitions.">
<title>Slide And Push Menus With CSS3 Transitions</title>
    
<!-- css -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/font-awesome/font-awesome.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">

</head>



<body class="">

<nav class="menu slide-menu-left">
    <ul>
        <li><button class="close-menu">← Close</button></li>
        <li><a href="#">Broccoli</a></li>
        <li><a href="#">Tomato</a></li>
        <li><a href="#">Cucumber</a></li>
        <li><a href="#">Kale</a></li>
        <li><a href="#">Celery</a></li>
    </ul>
</nav><!-- /slide menu left -->

<!-- /slide menu right -->

<!-- /slide menu top -->

<!-- /slide menu bottom -->

<!-- /push menu left -->

<!-- /push menu right -->



<!-- /push menu bottom -->

<div id="wrapper">

    <div class="info-bar">
        <div class="container">
            <a href="http://www.callmenick.com/?p=458" class="icon fa fa-home" data-title="Back To Tutorial"></a>
            <a href="http://callmenick.com/tutorial-demos/image-caption-reveal-on-hover/" class="icon fa fa-arrow-left" data-title="Pevious Demo"></a>
            <!-- <a href="" class="icon fa fa-arrow-right" data-title="Next Demo"></a> -->
            <a href="http://callmenick.com/tutorial-demos/slide-push-menus/slide-push-menus.zip" class="icon fa fa-download" data-title="Download Source"></a>
            <a href="http://www.callmenick.com/tutorials" class="icon fa fa-folder-open" data-title="Tutorial Archives"></a>
        </div>
    </div><!-- /.info-bar -->
    
    <header>
        <div class="branding">
            <div class="container clearfix">
                <div class="logo">
                    <a href="http://www.callmenick.com">
                        <img src="img/logo.png" alt="Call Me Nick - Tutorials, Resources, &amp; Articles for Web Design &amp; Web Development">
                    </a>
                </div>
                <div class="social">
                    <a href="https://www.facebook.com/callmenick1" target="_blank" class="fb">facebook</a>
                    <a href="https://twitter.com/nicksalloum_" target="_blank" class="twitter">twitter</a>
                    <a href="https://plus.google.com/115555859876227750152/" target="_blank" class="googleplus">google plus</a>
                    <a href="http://feeds.feedburner.com/callmenick_" target="_blank" class="rss">rss</a>
                    <a href="http://www.callmenick.com/subscribe/" class="email">email</a>
                </div>
            </div>
        </div><!-- /.branding -->
        <div class="site-title">
            <div class="container">
                <h1>Off Screen Menus That Transition Into View Using CSS3</h1>
            </div>
        </div>
    </header>


    <div id="main">
        <div class="container">
            
            <div class="buttons">
                <button class="nav-toggler toggle-slide-left">Slide Menu Left</button>
              
            </div><!-- /buttons -->

            <section class="content">
                <h1>Vegetables</h1>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                
            </section>

        </div>
    </div><!-- #main -->


    <footer>
        <div class="container">
            <div class="clearfix">
                <aside>
                    <ul>
                        <li><a href="http://www.callmenick.com/">Welcome</a></li>
                        <li><a href="http://www.callmenick.com/category/tutorials">Tutorials</a></li>
                        <li><a href="http://www.callmenick.com/category/snippets">Snippets</a></li>
                        <li><a href="http://www.callmenick.com/category/articles">Articles</a></li>
                        <li><a href="http://www.callmenick.com/category/resources">Resources</a></li>
                    </ul>
                </aside>
                <aside>
                    <ul>
                        <li><a href="http://www.callmenick.com/about">About</a></li>
                        <li><a href="http://www.callmenick.com/contact">Contact</a></li>
                        <li><a href="http://www.callmenick.com/subscribe">Subscribe</a></li>
                    </ul>
                </aside>
                <aside class="logo">
                    <a href="http://www.callmenick.com/">
                        <img src="img/logo.png" alt="Tutorials, Snippets, Resources, and Articles for Web Design and Web Development">
                    </a>
                </aside>
            </div>
            <div class="copyright">
                <span>
                    © 2014, Nick Salloum<br>
                    <a href="http://callmenick.com" target="_blank">callmenick.com</a>
                </span>
            </div>
        </div>
    </footer><!-- /footer -->

</div><!-- /#wrapper -->

<!-- js -->
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script src="js/classie.js"></script>
<script src="js/nav.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34160351-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>


</body></html>

base.css

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* CSS Reset
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: normal;
}
ol,
ul {
    list-style: none
}
blockquote {
    quotes: none
}
blockquote:before,
blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Globals
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #67b5d1;
    color: #505050;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* line-height: 1.8; */
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
    font-weight: 400;
}
a {
    text-decoration: none;
    color: #67b5d1;
}
a:hover {
    color: #3184a1
}
/* clear floated divs */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Template
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#wrapper {
    width: 100%;
    margin: 0 auto;
}
#main {
    background-color: #fff;
    padding: 30px 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Info Bar
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#info-bar {
    background-color: #40a2c5
}
#info-bar a {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    padding: 10px;
}
#info-bar a:hover {
    background-color: #3184a1
}
span.all-tutorials,
span.back-to-tutorial {
    display: block;
    width: 50%;
}
span.all-tutorials {
    float: left;
    text-align: left;
}
span.back-to-tutorial {
    float: right;
    text-align: right;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Header
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
header {
    padding: 30px 0
}
#title {
    text-align: center
}
#title h1 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 10px;
}
#title h2 {
    color: #b5dbe9;
    font-size: 20px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Footer
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
footer {
    padding: 30px 0;
    text-align: center;
}
footer span {
    color: #fff
}
footer span a {
    color: #b5dbe9
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media all and (max-width: 600px) { 
  #info-bar a {
      display: block
  }
  span.all-tutorials,
  span.back-to-tutorial {
      width: 100%
  }
  span.all-tutorials,
  span.back-to-tutorial {
      float: none;
      text-align: center;
  }
  span.all-tutorials {
      border-bottom: solid 1px #3184a1
  }
  #title h1 {
      font-size: 20px
  }
  #title h2 {
      font-size: 16px
  }
}

style.css

body { margin:0px 0px; text-align:center; font-family:'Comic Sans MS',Arial,sans-serif; font-size:20px; color:#00f600; background:#000000; }
a:link { color:#00ce00; }
a:visited { color:#00a700; }
a:hover { color:#1eff1e; text-decoration:none; }
a:active { color:#6cff6c; text-decoration:none; }

body {
    overflow-x: hidden
}
#wrapper {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
section {
    margin-bottom: 30px
}
section h1 {
    font-family: "Oswald", sans-serif;
    margin-bottom: 10px;
}
section p {
    margin-bottom: 30px
}
section p:last-child {
    margin-bottom: 0
}
section:last-child {
    margin-bottom: 0
}
section.toggle {
    text-align: center
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}
nav.menu {
    position: fixed;
    z-index: 20;
    background-color: #003300;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
nav.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav.menu a {
    font-weight: 200;
    color: #00ff00;
}
button.close-menu {
    background-color: #006600;
    color: #00ff00;
}
button.close-menu:focus {
    outline: none
}
nav.slide-menu-left {
    top: 0;
    width: 200px;
    height: 100%;
}
nav.slide-menu-left li {
    display: block;
    text-align: center;
}
nav.slide-menu-left li:first-child {
    border-top: none
}
nav.slide-menu-left li:last-child {
    border-bottom: none
}
nav.slide-menu-left a {
    display: block;
    padding: 1px;
    font-size: 14px;
}
nav.slide-menu-left button.close-menu {
    margin: 10px 0;
    padding: 10px 30px;
    background-color: #006600;
    color: #00ff00;
}
nav.slide-menu-left {
    left: -200px}
body.sml-open nav.slide-menu-left {
    left: 0
}

[Greenguy]

Won't putting that base.css on the pages screw up my existing (basic) HTML?

Meaning, it's got this in there:

td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

Won't that mess up all my existing tables?

[Greenguy]

Originally Posted by Cleo

Also you have the Google Analytics in the wrong place. It should be before the closing head tag.

I double checked & I have it in the right place according to what's in my analytics account:

PHP Implementation
Create a PHP file named "analyticstracking.php" with the code above and include it on each PHP template page. Then, add the following line to each template page immediately after the opening <body> tag:
<?php include_once("analyticstracking.php") ?>

[pc]

Originally Posted by Greenguy

Won't putting that base.css on the pages screw up my existing (basic) HTML?

Meaning, it's got this in there:

td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

Won't that mess up all my existing tables?

Not really sure, does it work without it ?

But you can apply separate classes to different tables if yes.

I would take out any unnecessary css styles checking one by one each time if it works or not ( disable chrome cache pages for very often checking for changes )

[Greenguy]

Something just crossed my mind: aside from the style of the button (which I'm pretty sure I can figure out) the script does work as described on that site (except for the Close button)

So what I need to know how to do is this:

Originally Posted by pc

Also since you have 150 categories or so you can make the panel absolute and scrollable.

I did try to take the height tag out of the css but it loaded just the same.

[pc]

overflow-y:scroll;

The scroll itself you can also nicely style.

[Greenguy]

Originally Posted by pc

overflow-y:scroll;

The scroll itself you can also nicely style.

That's good bingo! I also made some progress on the button

http://www.link-o-rama.com/greenguy/1-slide.htm

[pc]

Once you finish menu and apply it to your site we will start implementing thumbnails upload and merging it with db.