The first step is to set up Joomla to use a "Guest" mode. This is somewhat different than "Public" access, as Guest mode is active only when a user is not logged in.

Here's how to do that:

1. Create a new group in Users > Groups. Name it GUESTS. Select Parent Group as PUBLIC.
2. Goto Users > Options > Component tab. Select GUEST as the "Guest User Group" there.
3. Create a new ACL in Users > Acces Levels . Name it as GUEST USERS.
4. Edit GUESTS USERS ACL, which you just created and select GUESTS group to it. Don't add PUBLIC group to it.
5. Edit PUBLIC ACL and add GUEST USERS ACL to it.
6. Now you are done with the group and access level creation. Now goto Global Configuration and select DEFAULT ACCESS LEVEL as GUEST USERS.

Now that you have "guest" mode set up, you will create a menu item for the "Login" as usual (or edit your existing "login" if you have it.
Set the Access Level to Guest. That way it will show up only to non-logged in users.

Now, the next step is to create a "Logout" menu item that will show only to "registered" users.

Use this extension to make the "Logout" a simple, one click process:

http://extensions.joomla.org/extensions/extension/access-a-security/site-access/quick-logout

This creates a new menu item type that gives a quick, no confirmation logout.

Set the access level to be "Registered" and put it on the menu right next to your "Login" button.

The result is you have 2 menu items ... one for Login and one for Logout.

But, the Login button is only shown to non-logged in users, and the Logout button only appears to logged in users.

So, it appears to be a single menu item that "toggles" from "Login" to "Logout" ... but in reality is 2 different menu items.