Code With Design » menu http://codewithdesign.com web application development blog by Caleb Jonasson Thu, 15 Sep 2011 17:52:47 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Creating multiple sidebar menus in wordpress http://codewithdesign.com/2010/05/22/creating-multiple-sidebar-menus-in-wordpress/ http://codewithdesign.com/2010/05/22/creating-multiple-sidebar-menus-in-wordpress/#comments Sat, 22 May 2010 16:48:55 +0000 Caleb Jonasson http://codewithdesign.com/?p=403
  • Adding The ‘Like’ Button to WordPress
  • Creating user input with menus in java
  • Going through website creation part 2: Backend
    • ]]>

    In this tutorial I won’t just be making a sidebar menu, but three additional menus that will be placed side by side in the footer. Unfortunately the code for this is not as easy as it may seem. The possibility of creating the sidebars through only your footer.php and sidebar.php is not going to happen. Fortunately the code is very simple and involves a lot of copy and pasting with a couple modifications.

    For this tutorial I will be using wordpress 2.9.2 (currently the latest release)

    When creating multiple “sidebars” You only need to do two things. The first thing is to edit the functions.php page, and the second is to edit the HTML where the sidebar/dynamic menu will be placed.

    The first thing that we will be doing is opening our functions.php page. The code for one sidebar should look like this:

    1
2
3
4
5
6
7
8
9
10

    if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'cwj'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

    The next thing we will need to do is modify this code so we can have four dynamic menus throughout our WordPress theme. We will need to copy and paste the array and change out the name and the ID to something new and exciting. Because the menus will be placed in my footer I will be calling them “Footer1″ etc for each menu. The ID can be anything as long as it is unique to that specific menu. If you have two menus with the same ID you will only be able to add widgets to the last referenced menu.

    The code should now look something like this:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'CJDesign-dark1'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer1', 'CJDesign-dark1'),
        'id' => 'col_sidebar1',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer2', 'CJDesign-dark1'),
        'id' => 'col_sidebar2',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer3', 'CJDesign-dark1'),
        'id' => 'col_sidebar3',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

    The next stage in this tutorial is to quickly and easily insert the line of code to display your newly created dynamic menus. Just place this into the HTML where you would like it to be.

    1
2

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
<?php endif; ?>

    You simply need to replace where I have Footer3 with the name of the sidebar that you previously created with the function.

    The sidebar now looks as follows:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ) : ?>
  		<?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) : ?>
        <?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
        <?php endif; ?>
    </ul>
</div>

    And the widgets can be modified through the WordPress widget page.

    <img>

    And the final product.

    <img>

    Related posts:

    1. Adding The ‘Like’ Button to WordPress
    2. Creating user input with menus in java
    3. Going through website creation part 2: Backend

    ]]>     http://codewithdesign.com/2010/05/22/creating-multiple-sidebar-menus-in-wordpress/feed/ 2     Creating user input with menus in java http://codewithdesign.com/2010/01/15/creating-user-input-with-menus-in-java/ http://codewithdesign.com/2010/01/15/creating-user-input-with-menus-in-java/#comments Sat, 16 Jan 2010 03:40:45 +0000 Caleb Jonasson http://codewithdesign.com/?p=245
  • Create a press enter to continue with java
  • Java: Pass as many strings as you want through a method
  • Java: basic for and while loops
    • ]]>

    When working with console command lines in java I found myself needing a solution that works when in certain situations. The console was a java based game and the need was user input because the game was being built in a text style format.

    In this article I will be using ‘equalsIgnoreCase();’ to match a string with what I would like it to be. I will also be using the ‘Scanner’ class, keyboard inputs, and String objects. Here is the code that I will be working with…

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    import java.util.Scanner;
 
public class userInputWithMenus {
public static void main(String[] args) {
Scanner keyboard = new Scanner(System.in);
 
System.out.println("1. Menu.");
System.out.println("2. Item.");
System.out.println("3. Close.\n");
 
String inp = keyboard.nextLine();
 
if(inp.equalsIgnoreCase("1") || inp.equalsIgnoreCase("main")){
 
//execute what happens on main.
 
}else if(inp.equalsIgnoreCase("2") || inp.equalsIgnoreCase("item")){
 
//execute what happens on item
 
}else if(inp.equalsIgnoreCase("3") || inp.equalsIgnoreCase("exit")){
 
//execute what happens on close
 
}
 
}
 
}

    The first thing we do is import a class that is built into java. Here we can access the scanner and assign a variable to it. Once we have our main class and main method setup we will display our menu and request the next line of text from the user and load this into the string ‘inp.’ The next block of code is the If else statements normally you would execute another method or run the program from this point on however that was not what I intended on covering here.

    Inside of the if else blocks..

    1
2
3

    if(){
 
}

    I placed code that matched the string contents with what I needed it to; in this case the menu items. I didn’t want the user to be forced into typing menu, item or exit so I made an or statement using ‘||’ to introduce the option of matching the string with the numbers. This is all done with a line that looks as follows.

    1

    inp.equalsIgnoreCase("main") || inp.equalsIgnoreCase("1");

    You can just use ‘imp.equals();’ however I in creating this some copying and pasting was done. To get your menu to work even better you can try putting it into a loop and breaking the loop when the user enters a valid command. This can be easily done with a boolean and a while loop.

    Related posts:

    1. Create a press enter to continue with java
    2. Java: Pass as many strings as you want through a method
    3. Java: basic for and while loops

    ]]>     http://codewithdesign.com/2010/01/15/creating-user-input-with-menus-in-java/feed/ 0     Javascript Hoirzontal Menu http://codewithdesign.com/2009/10/08/javascript-hoirzontal-menu/ http://codewithdesign.com/2009/10/08/javascript-hoirzontal-menu/#comments Thu, 08 Oct 2009 08:31:53 +0000 Caleb Jonasson http://codewithdesign.com/?p=77
  • Creating a fixed header and Footer
  • JavaScript: setTimeout Firing Immediately
  • Modifying next and previous posts
    • ]]>

    javascript_horizontal_menu

    In order to create a proper working javascript based horizontal menu you need to have all of the necessary files. These files consist of :

    /SpryAssets/SpryMenuBarHorizontal.css
    /SpryAssets/SpryMenuBar.js

    index.php
    main.css

    The first section of code is going to be the SpryMenuBarHorizontal.css

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

    @charset "UTF-8";
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #4b4b4b;
padding: 0.2em 0.4em;
color: #ffffff;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #4b4b4b;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333366;
color: #ccccff;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #4b4b4b;
}
}

    The second file, SpryMenuBar.js looks like this.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

        var Spry;
    if(!Spry)
    {
    Spry = {};
    }
    if(!Spry.Widget)
    {
    Spry.Widget = {};
    }
    Spry.Widget.MenuBar = function(element, opts)
    {
    this.init(element, opts);
    };
 
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
    {
    this.element = this.getElement(element);
 
    this.currMenu = null;
 
    var isie = (typeof document.all != ‘undefined’ &amp;&amp; typeof window.opera == ‘undefined’ &amp;&amp; navigator.vendor != ‘KDE’);
    if(typeof document.getElementById == ‘undefined’ || (navigator.vendor == ‘Apple Computer, Inc.’ &amp;&amp; typeof window.XMLHttpRequest == ‘undefined’) || (isie &amp;&amp; typeof document.uniqueID == ‘undefined’))
    {
    return;
    }
    if(opts)
    {
    for(var k in opts)
    {
    var rollover = new Image;
    rollover.src = opts[k];
    }
    }
 
    if(this.element)
    {
    this.currMenu = this.element;
    var items = this.element.getElementsByTagName(‘li’);
    for(var i=0; i 0)
    {
    layers[0].parentNode.removeChild(layers[0]);
    }
    };
 
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
    var menus = root.getElementsByTagName(‘ul’);
    for(var i=0; i 0 ? submenus[0] : null);
 
    var hasSubMenu = false;
    if(menu)
    {
    this.addClassName(link, “MenuBarItemSubmenu”);
    hasSubMenu = true;
    }
 
    if(!isie)
    {
 
    listitem.contains = function(testNode)
    {
    if(testNode == null)
    {
    return false;
    }
    if(testNode == this)
    {
    return true;
    }
    else
    {
    return this.contains(testNode.parentNode);
    }
    };
    }
 
    var self = this;
 
    this.addEventListener(listitem, ‘mouseover’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
    clearTimeout(closetime);
    if(self.currMenu == listitem)
    {
    self.currMenu = null;
    }
 
    self.addClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu &amp;&amp; !self.hasClassName(menu, “MenuBarSubmenuVisible”))
    {
    opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }
    }, false);
 
    this.addEventListener(listitem, ‘mouseout’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
 
    var related = (typeof e.relatedTarget != ‘undefined’ ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
    {
    clearTimeout(opentime);
    self.currMenu = listitem;
 
    self.removeClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu)
    {
    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }
    }
    }, false);
    };

    Now you need your index.php. This is where the menu content will be.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />
</head>
 
<body>
 
<div id=”container”>
<div id=”header”>
<h1>Header</h1>
 
<ul id=”MenuBar1″>
<li>
<div align=”center”><a href=”#”>simple</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Smart</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Tutorials</a>
<ul>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Illustrator</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>Dreamweaver</a></li>
</ul>
</div>
</li>
</ul>
<!– end #header –></div>
<div id=”mainContent”>
<h1> Main Content </h1>
<!– end #mainContent –></div>
<div id=”footer”>
<p>Footer</p>
<!– end #footer –></div>
<!– end #container –></div>
<script type=”text/javascript”>
<!–
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″);
//–>
</script>
</body>
</html>

    The last file that we need is the main.css file.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtrHdr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColElsCtrHdr #header {
background: #4b4b4b;
color: #ffffff;
padding: 0 10px 0 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
margin-top: 50px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}

    Try it out by clicking here.

    Related posts:

    1. Creating a fixed header and Footer
    2. JavaScript: setTimeout Firing Immediately
    3. Modifying next and previous posts

    ]]>     http://codewithdesign.com/2009/10/08/javascript-hoirzontal-menu/feed/ 0